I menu dropdown si creano molto semplicemente con CSS.
Tipicamente, sia che si tratti di menu orizzontali o verticali, vengono costruiti utilizzando le unordered list, cioè ul. La funzionalità dropdown invece viene creata combinando la pseudoclasse hover assieme alla proprietà visibility di liste annidate.
L'esempio seguente mostra un menu orizzontale in cui le voci si espandono verso il basso quando si posiziona il mouse sopra.

#dropDownMenu ul li
{
    display: inline; /* remove the list bullets */
    float: left; /* horiziontal menu */
    width: 150px; /* limit the width of every item */
}
#dropDownMenu ul li ul
{
    visibility: hidden; /* submenus are hidden */
}
#dropDownMenu ul li:hover ul
{
    /* submenues become visible when the mouse hovers the parent item */
    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>
    this is a menu item without a submenu
    <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>

Poiché in Internet Explorer 6 la pseudoclasse hover è supportata solo dai collegamenti ipertestuali, non è possibile utilizzare i menu dropdown CSS.
Una soluzione è quella di usare un menu sempre espanso a seconda della versione del browser.

[if IE 6]>
<style type="text/css">
#dropDownMenu ul li ul
{
    visibility: visible; /* submenus are always visible */
}
</style>
<![endif]