My contribution to drop down lists based on your old faithful lists.

This page is heavily based on: http://www.magnin-sante.ch/journal/html/menu3/menuhorizontal.htm. The main difference are a few style tweaks and the absolute positioning, that allows the pop up list to display over the page content [the existing incarnation forced the remainder of the content to be pushed downward]. To position this properly edit this style definition in the popup <div>: style=”position: absolute; top: 10px”, by changing the top value to be whatever you need. This was the only way I could think of getting the pop ups to overlay the actual content.

You can see it in action here

Browsers tested on:

• Mozilla 1.4 (OS: Win2k)
• IE 6 sp1 (OS: Win2k)
• IE 5.5 sp2 (OS: Win2k)
• IE 5.01 sp2 (OS: Win2k)

The source:

<script language=”JavaScript1.2” type=”text/javascript”>
<!–
function show(id) {
if (document.getElementById) {
document.getElementById(id).style.display=”block”;
} else if (document.all) {
document.all[id].style.display=”block”;
} else if (document.layers) {
document.layers[id].display=”block”;
}
}

function hide(id) {
if (document.getElementById) {
document.getElementById(id).style.display=”none”;
} else if (document.all) {
document.all[id].style.display=”none”;
} else if (document.layers) {
document.layers[id].display=”none”;
}
}
//–>
</script>
<style>
ul, li {
list-style-type : none;
margin : 0;
padding : 0;
}

ul.menu ul li {
display : inline;
}

ul.menu li {
float : left;
}

ul.menu a {
margin : 0 2px;
width : 100px;
height : 20px;
display : block;
text-align : center;
text-decoration : none;
border : 1px solid gray;
color : #000;
background : #fff;
}

ul.menu a:hover {
background : #ccc;
border : 1px solid gray;
}

ul.menu a:active {
background : gray;
border : 1px solid gray;
color : #fff;
}

#smenu1, #smenu2 {
padding : 0;
float : left;
display : none;
font-size : 10px;
width : 100px;
color : #000;
}
hr {
display: none
}
</style>
<div id=”nav” style=”position: absolute; top: 50px”>
<ul class=”menu”>
<li><a href=”” title=”“>Menu 1</a></li>
<li><a href=”” onmouseover=”show(‘smenu1’);” onmouseout=”hide(‘smenu1’);”>Menu 2</a>
<ul id=”smenu1” onmouseover=”show(‘smenu1’);” onmouseout=”hide(‘smenu1’);”>
<li><a href=”” title=”“>Sub menu 1</a></li>
<li><a href=”” title=”“>Sub menu 2</a></li>
<li><a href=”” title=”“>Sub menu 3</a></li>
<li><a href=”” title=”“>Sub menu 4</a></li>
<li><a href=”” title=”“>Sub menu 5</a></li>
<li><a href=”” title=”“>Sub menu 6</a></li>
<li><a href=”” title=”“>Sub menu 7</a></li>
<li><a href=”” title=”“>Sub menu 8</a></li>
</ul>
</li>
<li><a href=”” onmouseover=”show(‘smenu2’);” onmouseout=”hide(‘smenu2’);”>Menu 3</a>
<ul id=”smenu2” onmouseover=”show(‘smenu2’);” onmouseout=”hide(‘smenu2’);”>
<li><a href=”” title=”“>Sub menu 1</a></li>
<li><a href=”” title=”“>Sub menu 2</a></li>
<li><a href=”” title=”“>Sub menu 3</a></li>
</ul>
</li>
<li><a href=”” title=”“>Menu 4</a></li>
<li><a href=”” title=”“>Menu 5</a></li>
</ul>
<hr />
</div>