У меня есть вложенный список:

li:hover {
  background-color: lightgray;
}
ul li ul li:hover {
  font-weight: bold;
}

<ul>
  <li>fnord
    <ul>
      <li>baz</li>
      <li>foo
        <ul>
          <li>baz</li>
          <li>foo</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>gnarf
    <ul>
      <li>baz</li>
      <li>foo
        <ul>
          <li>baz</li>
          <li>yolo</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Проблема в том, что при наведении «foo» будет зависать «fnord» и все егоli элементы. Как мне парить толькоli моя мышь на самом деле зависла?

Вложенность является переменной и теоретически может быть бесконечной.

Я настроилJSFiddle.