Styling a dynamic nested UL structure

Question

I have a nested UL structure that represents a folder tree which can grow very deep. I'm stuck at doing a simple :hover effect for the LI elements. The problem is that doing a li:hover won't work as it affects all the parent "li's" aswell. Usually I would have tried to apply the hover effect to a link element or something in the LI, to avoid parents taking the style aswell, but due to circumstances that's not an option now. I have a working solution by using javascript to place a class on the hovered LI and then style this class instead, but i'm really interested in seeing if there's actually a way of accomplishing this through pure css.

I imagine there may be a way of doing a very "hardcoded" css solution but i am more interested in a dynamic and clean one, since the structure can nest indefinitely.

Maybe there's some pseudo selector i'm not aware of? Note that it doesn't have to be IE<8 compatible

<ul>
    <li>
        This LI should not recieve the hover effect
        <ul>
            <li>
                A li:hover will place the effect on this LI, 
                but also the parent LI, since that element is
                also techincally being hovered.
            </li>
        </ul>
    </li>
</ul>

Answer 1

If you want to use pure CSS then you will need to us parent, child, elements.

For the hover elements:

ul li:hover{
   "Style"
}

For the other elements:

ul li ul li{
    "Style"
}