Looking for an EASY to use Drop Down Menu thats FREE!

[spenland]

I've been searching for an easy to use DHTML or Javascript drop down menu for a long time and have yet to come across one that:

1. Isn't a nightmare to figure out
2. Works with IE and Firefox
3. Is open source!

Does anyone have one that they use and like? I'm usually good at figuring out the parameters that you have to adjust but so many of them seem to "float" around the page and are difficult to make static in a table.

Thanks guys!

[ran_dizolph]

Any particular reason you want DHTML?

alistapart has a few solid tutorials on building a CSS based drop-down, that only requires a tiny bit of javascript to work in IE...check it out.

Hope that helps.

[spenland]

Thanks Ran, I found this link to be almost exactly what I need

http://www.alistapart.com/articles/horizdropdowns

The only problem is that I want a menu system that is horizontal and the drop down menus are vertical. Do you know how to edit the CSS to accomplish this?

I think the <ul>[*] menu will only work vertically.

Thanks

[MarcieZoob]

AnyLink CSS Menu is really easy to use and can be used horiz/vert:

http://www.dynamicdrive.com/dynamici...anylinkcss.htm

[KeithO]

*technically* all client side scripting such as javascript is open source.

[spenland]

Ok I've gotten this little script that is like the one shown here:

http://www.tanfa.co.uk/css/examples/menu/hs7.asp

It works almost perfect except for a few things.

1. I would like the first button to not be a drop down but rather just a link to home. How can I do this?

2. I would like the text of each main button to change color when I rollover it. How??

Here is the css code I'm sure the answer lies here:

body { behavior:url("csshover.htc"); }

#menu {
width: 100%;
background: #006699;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}

#menu a, #menu h2 {
font: bold 12px/12px arial, helvetica, sans-serif;
display: block;
margin: 0;

}

#menu h2 {
color: #fff;
background: #006699;
/* text-transform: uppercase; */
text-align:left;
padding: 10px 10px;
}

#menu a {
color: #006699;
background: #efefef;
text-decoration: none;
width: 12em;
border-color: #ccc #ccc #ccc #ccc;
border-width: 1px;
border-style: solid;
padding: 5px 5px;
}

#menu a:hover {
color: #FDCE0C;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

Any Ideas?

[KeithO]

on quick glance, by not having a sub list underneath that listing will remove any dropdowns.