The dropdown menus can be easily created with CSS.
Either horizontal or vertical menus are built using unordered list,
that is ul. The dropdown feature is created combining the hover
pseudoclass along with the visibility property of nested lists.
The following example shows a horizontal menu where the items expand downward.
#dropDownMenu ul li
{
display: inline;
float: left;
width: 150px;
}
#dropDownMenu ul li ul
{
visibility: hidden;
}
#dropDownMenu ul li:hover ul
{
visibility: visible;
}
<div id="dropDownMenu">
<ul>
<li><a href="item1.html">Menu Item One</a>
<ul>
<li><a href="item1-1.html">Sub
menu item one</a></li>
<li><a href="item1-2.html">Sub
menu item two</a></li>
<li><a href="item1-3.html">Sub
menu item three</a></li>
<li><a href="item1-4.html">Sub
menu item four</a></li>
</ul>
</li>
<li><a href="item2.html">Menu Item Two</a></li>
<li><a href="item3.html">Menu Item Three</a>
<ul>
<li><a href="item3-1.html">Sub
menu item one</a></li>
<li><a href="item3-2.html">Sub
menu item two</a></li>
<li><a href="item3-3.html">Sub
menu item three</a></li>
<li><a href="item3-4.html">Sub
menu item four</a></li>
</ul>
</li>
</ul>
</div>
Since in Internet Explorer 6 the hover pseudoclass is supported
only by hyperlinks, it is not possible to use CSS dropdown menus.
One solution is to use a conditional directive to expand statically the menu
accordingly to the browser version.
<style type="text/css">
#dropDownMenu ul li ul
{
visibility: visible;
}
</style>