css hover element to show child, how can I keep the hover css on the parent when I mouseover the child?
css, html, menu
Solution
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`?
Problem
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> ```