css悬停元素来显示孩子，当我将鼠标悬停在孩子身上时，如何将悬停css保留在父母身上？

Question

I have a <ul> with several <li> elements. Inside the <li> element there is a large <div> that is hidden by default. When I hover the <li> its background changes color as does the bottom border as well as displaying the <div> . This is the expected behavior. Note I am using css and not javascript for the hover effect. .menuItem:hover .menuBody { display:block;} . My problem is that when I hover over the now showing <div> its parent, the <li> in this case, loses it's hover style. How can I force the parent to keep the hover styling when I hover over the <div> ? Basic html for the menu is like this. Any help or tips is of course appreciated.

<ul>
    <li class="menuItem">
        <a href="#">MenuItem</a>
        <div class="menuBody></div>
    </li>
</ul>

Answer 1

What you are asking is actually default behavior. When you hover over a child, the parent also receives the hover status, and the hover css should still be displayed. Have a look at this example:

http://jsfiddle.net/jxZ6S/

We will need some more code to see what exactly is wrong. Are you sure you are applying the hover style to the parent, and not to the a ?