Javascript Code

Copy this to the HTML file inside of your HEAD tag
<script type="text/javascript"> <!-- window.onload=menuOver; function menuOver(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('mbDropDownMenu'+i)) {document.getElementById('mbDropDownMenu'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script>

CSS Style

Copy this into the html page or add to the stylesheet
<style type="text/css"> <!-- body { margin: 0; padding: 0; background: white; font: 80% verdana, arial, sans-serif; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } dd { display:none; } #dropDownMenu { padding:0; margin:0; z-index:1000; } #dropDownMenu dl { float: left; width: 100px; margin: 0 1px; background: #ccc; } #dropDownMenu dt { cursor: pointer; text-align: center; font-weight: bold; background: #ccc; border: 1px solid gray; } #dropDownMenu dd { } #dropDownMenu li { text-align: center; background: #fff; } #dropDownMenu li a, #dropDownMenu dt a { color: #000; text-decoration: none; display: block; height: 100%; border: 0 none; } #dropDownMenu li a:hover, #dropDownMenu dt a:hover { } a { text-decoration: none; color: black; color: #222; } --> </style>

Normal HTML

Place this code where you want the menu to appear.

Full Source Code

This is a packaged page, just cut and paste!