targeting li on hover but not parent li

Question

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

Answer 1

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/