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

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 😛