targeting li on hover but not parent li

I have a dynamically generated list that has potentially up to about 5 levels. I want the listed item text to underline when I hover over the listed item, however not the parent li.

see example.

http开发者_开发问答://jsfiddle.net/ca7fL/5/

you see when you hover on "this", the above parent li, underlines aswell.

Any ideas?

Cheers

---

That seems hard to achieve, since when you point the child li element you're also effectively pointing its parent.

There is a solution, though: add a span tag to your menu items, and make that tag hoverable: http://jsfiddle.net/ca7fL/16/

---

Maybe you need to apply css classes to LI - Elements when geenerating them, so you can style them explicitly. CSS itself seems to be insufficient here.

---

ul li ul { padding-left:20px}
ul li ul li:hover { text-decoration:underline; curor:pointer;}