HTML dropdown menus with menu items using onmouseover.

[jasonb]

I spent a good 6 hours searching for examples of simple HTML code that would generate a dropdown menu when you moved your mouse over a link. What I ended up with was either code that was tremendously complex, or code that only worked in IE. Finally, I posted a plea for help at the MozillaZine forums, requesting something simple and cross-platform compliant.

The following is an example of a really basic dropdown menu. It could be further reduced to its absolute essentials, but this actually looks good:

Code: Select all

<div style="text-align: center">
<div style="width: 120px; margin-left: auto; margin-right: auto; text-align: center">
<span style="background-color: #667A86; color: white; width: 120px; display: block"
      onmouseover="document.getElementById('subMenu').style.visibility = 'visible'"
      onmouseout="document.getElementById('subMenu').style.visibility = 'hidden'">
Menu
</span>
<div id="subMenu"
     style="visibility: hidden; background-color: #99CCCC; width: 110px;
            text-align: left; padding: 5px"
     onmouseover="document.getElementById('subMenu').style.visibility = 'visible'"
     onmouseout="document.getElementById('subMenu').style.visibility = 'hidden'">
<a style="text-decoration: none" href="http://www.dante.com/">Inferno Enteprises</a><br>
<a style="text-decoration: none" href="http://www.dante.com/discussion/">Ask Virgil</a>
</div>
</div></div>

One thing to note is the use of onmouseover and onmouseout twice. If it's only declared once, in the definition for the menu item itself, then as soon as you move the mouse cursor off of "Menu" to go to one of the submenu items, the submenu list will disappear.

I know that this works with both Mozilla 1.5a and IE 6, but can't vouch for other browsers / versions.