Tab on hover mode while mouse over drop down menu

Question

How could I have the tab to be on hover mode while I rollover the drop down sub-menu. Does it require javascript or it could be done solely on CSS?

 <li id="anchor" class="title dropdown"><a href="#">Main Tab</a>
                <div class="column">                    
                    <ul>
                        <li class="subtitle">Button 1</li>
                        <li class="subtitle">Button 2</li>
                        <li class="subtitle">Button 3</li>
            </div>        
        </li>

Answer 1

you can do it with CSS but need JS for older crappier browsers(ie6) e.g.

li .column{
   display: none;
}

li:hover .column{
   display: block
}

IE6 only supports hover on anchor tags hence the need for JS.

Answer 2

If you are lazy, create one online: http://purecssmenu.com/

^_^

Answer 3

As matpol suggested, you can use css to do it, and use the css hover fix to sort it in IE.

As a side note, you don't need that div in there, everything you need to do style wise can be done by styling the nested li element (you also need to close the second ul too). I'm guessing its just a quickly done code snippet anyway, but I thought I'd bring it up :)

Update;

Tbh howver mega the dropdown is, you shouldn't need divs in that level (you can put them in the <li>'s if you need to).

Something like this...

<li id="anchor" class="title dropdown"><a href="#">Main Tab</a>
  <ul class="column">
    <li class="subtitle">Button 1</li>
    <li class="subtitle">Button 2</li>
    <li class="subtitle">Button 3</li>
  </ul>        
</li>

/* styles */


li#anchor:hover {
  /* Styles for tab hover state, will be in effect when you're hovering over any child ul/li elements */
}

li#anchor ul.column {
  display: none; 
  /* Styles for this ul, float, position etc */
}

li#anchor:hover ul.column { 
  display: block;
}

Its untested, but I've done more of these than I'd care to remember :P