Standards Based DHTML Menus

There are many ways to create DHTML menus, this tutorial will explain one way to do it using only CSS to create the drop-down menus. This tutorial takes advantage of the :hover pseudo-class and how CSS2 implements it across all elements to create a drop-down menu.

The problem is, some Web browsers (IE 5 and 6) don't support the :hover property on any field other than an anchor. Luckily, IE 7 is coming out and should gain popularity quickly. For older browsers like IE 6 and 5, the menu will still work, they just won't see the drop-down menus.

See a Sample of the Menu

First Create Your Top Level Headings in an Unordered List

The unordered list is a logical extension of the menu, as that's really what a menu is: a list. Note that I've given the entire outer ul a class of "topmenu" and the li that will hold the drop-down a class of "submenu".

<ul class="topmenu">
<li><a href="#">Link 1</a></li>
<li class="submenu"><a href="#">Link with drop-down</a></li>
</ul>

Add in the Submenu Items

Once you' have a top level list set up, add in your second level lists beneath. Be sure that each top level list item that has a second level have the class "submenu".

<ul class="topmenu">
<li><a href="#">Link 1</a></li>
<li class="submenu"><a href="#">Link with drop-down</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
</ul>
</li>
</ul>

Use CSS to Change the List Layout

First you need to adjust the unordered lists in your menu so that they display as a block element, rather than a list. I also changed the background color for the entire menu.

<style type="text/css">
<!--
ul.topmenu, ul.topmenu ul {
display: block;
margin: 0px;
padding: 0px;
background-color: #c00;
}
ul.topmenu li {
display: inline;
list-style: none;
position: relative;
margin: 0px;
padding : 0px 15px 0px 0px;
}
-->
</style>

Then you need to set the list items within the topmenu to display inline, so that they are horizontal across the top of your screen, as a menu.

<style type="text/css">
<!--
ul.topmenu li ul {
display: block;
position: absolute;
left: 0;
top: 1em;
visibility: hidden;
width: 10em;
z-index: 1000;
background-color : #fff;
border : 1px solid #000;
border-top: 0;
}
-->
</style>

Write the CSS for the Sub-Menus

The last bit of CSS you need is for the sub-menus. These CSS lines will build the sub-menus as single line lists under the top menu, and have them display when the mouse hovers over the top menu item.

<style type="text/css">
<!--
ul.topmenu a {
color : #ffffff;
} ul.topmenu li ul li {
margin: 0 0 0 -1.5em;
padding: 0;
display: block;
width: 100%;
margin : 0px 0px 5px 0px;
background-color : #fff;
color : #000;
}
ul.topmenu li ul li a {
display: block;
margin: 0;
padding: 0 0 0 5%;
width: 100%;
width: 95%;
color : #000;
}
ul.topmenu li.submenu:hover { padding-bottom: 30em; } ul.topmenu li.submenu:hover ul { left: 0; visibility: visible; } ul.topmenu li.submenu:hover ul li { margin-bottom: 0px; } ul.topmenu li.submenu:hover ul li:hover { background-color: #ccc; } -->
</style>