Many DHTML drop-down (fly-out) menu solutions are complicated to implement, require complex JavaScript arrays, are resource intensive, and can't be read by search engines. This code addresses these issues, and allows you to create menus from <ul> lists very easily, which are SEO friendly.

A little Javascript hack is needed to get the :hover pseudo class to work in Internet Explorer.

<script type="text/javascript">
function startList() {
  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;
</script>

Here are the style definitions that define the look of the menus, as well as the fly-out behaviour when you move your mouse over an item.

<style type="text/css">
body {
	font: normal 11px verdana;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

ul li {
	position: relative;
	display: inline;
}

li ul {
	position: relative;
	display: none;
	top: 20px;
}

/* Styles for Menu Items */
ul li a {
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
}

li ul li, li ul li a {
	display: block;
	width: 200px;
	margin: 0px;
}

/* Fix IE*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li:hover ul, li.over ul { display: block; } /* The magic */
</style>

And finally the HTML code to make the menus. Just edit the lists with your own links and sub-menu links

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
	<ul>

	  <li><a href="#">History</a></li>
	  <li><a href="#">Team</a></li>
	  <li><a href="#">Offices</a></li>
	</ul>
  </li>
  <li><a href="#">Services</a>
	<ul>
	  <li><a href="#">Web Design</a></li>

	  <li><a href="#">Internet Marketing</a></li>
	  <li><a href="#">Hosting</a></li>
	  <li><a href="#">Domain Names</a></li>
	  <li><a href="#">Broadband</a></li>
	</ul>
  </li>
  <li><a href="#">Contact Us</a>
	<ul>

	  <li><a href="#">United Kingdom</a></li>
	  <li><a href="#">France</a></li>
	  <li><a href="#">USA</a></li>
	  <li><a href="#">Australia</a></li>
	</ul>
  </li>
</ul>