I need a simple drop down menu setup. I don't care if it's javascript or CSS.

It's a basic horizontal menu with one vertical drop down.

So far I haven't found anything really simple...or ones I've tried have worked in IE7 but not FF. Strange.

We normally use "son of suckerfish" or derivatives of that.

http://www.htmldog.com/articles/suckerfish/

Thanks Gav,

I'll have to give it another shot. It was the best of what I had tried so far...it just didn't display properly in FF.

If you want a couple samples of how we've used it:

http://www.atlasworldgroup.com
http://www.beararcheryproducts.com

There is an issue when the dropdown menu overlaps a Flash movie on Safari 2.0... However, our web stats show that the popularity of that browser doesn't warrant changing the layout...especially since the entire site can be navigated without the dropdowns.

Brandon! Why do I keep calling you Gav?!

: )

It must be that we're both strikingly good looking... it confuses people all the time!

Here's a super-clean CSS / JS version I use sometimes (this is a horizontal version but you probably just need to float the li's left):

<!-- Javascript -->

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;

<!-- HTML -->

<ul id="nav">
<li><a href="#" class="expand">About
<ul>
<li><a href="#">One </li>
<li><a href="#">Two </li>
<li><a href="#">Three </li>
</ul>
</li>
</ul>

<!-- CSS -->

#nav{
margin: 0;
padding: 0;
width: 240px;
text-align: left;
list-style-type: none;
border-top:1px solid #000;
background-color:#424242;
z-index:21;
}

#nav li{
line-height:30px;
padding: 0;
display: block;
text-decoration: none;
border-bottom:1px solid #000;
background-color:#424242;
}

#nav li a, #nav li a:link, #nav li a:visited, #nav li a:active{
display:block;
margin: 0px;
padding-left:10px;
width:230px;
font-size:12px;
color:#EFE3A0;
}

#nav li a:hover{
background-color:#666;
color:#FFF;
}
#nav li ul {
position: absolute;
margin-left: 201px;
margin-top:-30px;
display: none;
}

/* Fix IE. Hide from IE Mac */
* html #nav ul li { float: left; height: 1%; }
* html #nav ul li a { height: 1%; }
/* End */

I don't know what I'm doing wrong. I've followed the Son of Suckerfish directions but I'm still having problems with FF:

http://www.teamunited.com/haskins

You'll notice that the menu will display correctly in IE7 but in FF it doesn't hide the dropdown menu items.

Anyone have an idea?

Travis your going to kick yourself.

<li><a href="/practive_areas">Practice Areas
<ul>
<li><a href="/">Business </li>
<li><a href="/">Domestic </li>
<li><a href="/">Technology </li>
<li><a href="/">CTL </li>
</ul>
</li>

Note that the LI closes AFTER the UL you want to hide.

^^

Dude!

That's why it's always good to have a second pair of eyes.

Thanks Paul.