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;}