To achieve this effect, matpol has recommended using CSS and incorporating the CSS hover fix to address any issues in Internet Explorer.
It's worth noting that the extra div is unnecessary; you can style the nested li element instead (don't forget to close the second ul as well). While this snippet may have been put together quickly, it's important to mention this detail :)
Additionally,
No matter how complex the dropdown menu is, there's no need for additional divs at that level (you can include them within the <li> tags if required).
An example structure could be:
<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 applied when hovering over any child ul/li elements */
}
li#anchor ul.column {
display: none;
/* Styles for this ul, such as float, position, etc. */
}
li#anchor:hover ul.column {
display: block;
}
This code hasn't been tested, but I've worked on numerous similar implementations before :P