CODEWITHSUNDEEP
htmlcssmenu
Hcabnettek
Hcabnettek

Reputation: 12928

css hover element to show child, how can I keep the hover css on the parent when I mouseover the child?

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>

Upvotes: 3

Views: 11780

Answers (1)

Pevara
Pevara

Reputation: 14310

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?

Upvotes: 11

Related Questions