Question

I have a working pure css dropdown menu

html;

<ul id=nav>
<li><a href="">Main Link 1</a>
    <ul>
        <li><a href="">Main Link 1 Sub Link 1</a></li>
        <li><a href="">Main Link 1 Sub Link 2</a></li>
        <li><a href="">Main Link 1 Sub Link 3</a></li>
        <li><a href="">Main Link 1 Sub Link 4</a></li>
    </ul></li>
<li><a href="">Main Link 2</a></li>
<li><a href="">Main Link 3</a>
<ul>
        <li><a href="">Main Link 3 Sub Link 4</a></li>
        <li><a href="">Main Link 3 Sub Link 4</a></li>
        <li><a href="">Main Link 3 Sub Link 4</a></li>
        <li><a href="">Main Link 3 Sub Link 4</a></li>
    </ul></li>
<li><a href="">Main Link 4</a></li>
</ul>

Pls view the complete form below as I can’t post all the css code here;

http://jsfiddle.net/hF3dm/

My problem is when you hover the mail link and proceed to the sub links, the hover state for the main link disappears. How do I keep the hover state of the main link active whilst hovering over the sub links???

Answer 1

Best thing to do is to put the hover state for the main link on the ‘li’ rather than the ‘a’ tag.

ul#nav li:hover {
  // do something
}