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>