Drop Down Menus

Note: Doesn't work in IE 6!! & only tested to date in FF.

Create Nested List

Set up a nested list like this:

The code for the list looks like this:

<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about.htm">About</a>
<ul >
<li><a href="vision.htm">Vision</a></li>
<li><a href="mission.htm">Mission</a></li>
<li><a href="history.htm">History</a></li>
</ul>
</li>
<li><a href="products.htm">Products</a>
<ul>
<li><a href="widgets.htm">Widgets</a></li>
<li><a href="gadgets.htm">Gadgets</a></li>
<li><a href="brigits.htm">Brigits</a></li>
</ul>
</li>
<li><a href="dummy.htm">Services</a>
<ul>
<li><a href="installation.htm">Installation</a></li>
<li><a href="replacement.htm">Replacement</a></li>
<li><a href="guarantee.htm">Guarantee</a></li>
</ul>
</li>
<li><a href="contact.htm">Contact</a></li>
</ul>

Style Body

In the CSS set the body margin to 0 so that the list will sit in the top left corner with no gap.

body{
margin:0em;
}

Style List

Next, set the outer list to have no top margin, and -2.5em left margin. (for Firefox)

ul {
margin-left: -2.5em;
margin-top: -1em;
}

Style List Items

Next we need to style the list items. Add a background colour, borders, text alignment, set the width to 100px, the margin left to -1px (to remove the thick lines). Most importantly, set the display to block and the float to left.

li {
background: #CCCCCC;
border: 1px solid #000000;
text-align: center;
width:100px;
margin-left:-1px;
display: block;
float:left;
list-style: none;
}

Style Links

Next style the links and the hovers: turn off the underlines, choose colours, fonts & font sizes. Most importantly, add equal paddings to top and bottom of 5px each, display block and set the height to 100%. The hover style will inherit everything, so just add a colour change.

li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
font-weight: bold;
text-decoration: none;
color: #000000;
display:block;
height:100%;
padding-top:5px;
padding-bottom:5px;
}
li a:hover {
color: #FE0000;
}

Position the nested list

ul ul {
margin-top: 0em;
}

Style sub nav list items

Next, style the list items in the indented list. We will align them left, and change the boder to white.

ul ul li {
text-align: left;
border: 1px solid #ffffff;
}

Add Padding

Now pad in the text from the left using the <a> tag

ul ul li a {
padding-left:5px;
}

Add hover

Add the hover style by changing the colours of the background and the text.

ul ul li a:hover {
background: #666666;
color:#FFFFFF;
}

At this stage your list should be looking similar to this. (Note: I have only checked this in FF)

Turn off nested lists

The next step involves turning off the nested lists by default, and turning them on again on the hover.

ul ul {
overflow: hidden;
position: absolute;
height: 0px;
width: 0px;
margin-top: 0em;
padding-top:0.1em;
}

Turn on nested lists on hover

Finally, we add the code to turn the nested lists on again, on the list item hover

ul li:hover ul{
width: 100px;
height: auto;
}

The list should now look like this.

Using CSS