This script has been replaced by a new with multi-level support here.
<dl class="dropdown"> <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt> <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)"> <ul> <li><a href="#" class="underline">Navigation Item 1</a></li> <li><a href="#" class="underline">Navigation Item 2</a></li> <li><a href="#" class="underline">Navigation Item 3</a></li> <li><a href="#" class="underline">Navigation Item 4</a></li> <li><a href="#">Navigation Item 5</a></li> </ul> </dl>
You can have as many dropdowns on one page as you like. Just be sure and have a unique naming scheme for each menu (i.e. one-ddheader, two-ddheader, etc). The “look and feel” is fully customizable though the CSS and you can replace the unordered list with any content you like if you are not looking for a menu.
This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.
Update 4/28/2008 – I have updated the HTML and CSS to use a definition list and an unordered list in lieu of the previous div-based layout. Thanks to Paul and Deigo for the suggestion.
Update 4/28/2008 – Fixed flicker issue in FF2 on Mac and “-1” error in IE when quickly moving from the menu to the browser. Thanks to Philip and Chris for reporting these.
Update 5/16/2008 – Optimized the code reducing size by ~15%.