Ich habe eine verschachtelte Liste:

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>

Das Problem ist, dass das Schweben von "foo" auch "fnord" und alle seineli Elemente. Wie schwebe ich nur dieli meine maus schwebt eigentlich über

Die Verschachtelung ist variabel und kann theoretisch endlos sein.

Ich habe aJSFiddle.