Question

Sorry with title if it is not looks bad, I don’t know how can I write the title for my issue.

So I have a menu bar with some menu-items and submenu-items as:

<div id="mainmenu">
<ul id="menu">
    <li><a class="current" href="">Menu1</a></li>
    <li><a href="#">Menu2</a>
        <ul>
            <li><a href="">Submenu1</a></li>
            <li><a href="">Submenu2</a></li>
        </ul>
    </li>
    <li><a href="">Menu3</a></li>
    <li><a href="">Menu4</a></li>
</ul>
</div>

Here is the fiddle of what I have done so far.

What I want is to keep the menu-item also in :hover state if its submenu-item is being hover, such as If my mouse is on submenu or submenu2 the Menu2 should also be darkened. How can I do this with CSS?

I hope I am clear with my question.

EDIT:

Wooo thanks a lot every-one.

got it with: #menu li:hover

#menu li:hover,#menu a:hover,#menu > li a.current{

} ​

Answer 1

In last line of your CSS, add #menu li:hover to target selectors

Updated example here: http://jsfiddle.net/7UaNn/