在网上看到很多的下拉菜单，要就是不符合Xhtml的标准，要么就用一大堆的JS代码来实现。以下是我在网上收集到的很简单的下拉菜单，JS文件也很简单。

<!-- CSS -->
<style type="text/css" title="">
 <!--
 #nav li {float:left;position: relative; width: 100px; }
 #nav li ul { display: none; width:120px; position: absolute; 
 border-bottom:none; padding:0; margin:0;}
 #nav li:hover ul, #nav li.over ul { 
 display: block;
 }
 -->
</style>
<!-- JAVASCRIPT -->
<script type="text/javascript">
 <!--
  startList = function() {
 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>
<!-- xhtml -->
<ul id="nav">
 <li><a href="/">Home</a></li>
 <li>
 <div>
 <a accesskey="a" href="/about/?c=about">About</a>
 </div>
  <ul>
   <li><a href="/about/?c=about">Jeremy</a></li>
   <li><a href="/about/?c=site">This Site</a></li>
   <li><a href="/about/?c=resume">Resume</a></li>
  </ul>
 </li>
 <li><a href="/archive">Archive</a></li>
 <li><div><a href="/portfolio/?c=web">Portfolio</a></div>
  <ul>
   <li><a href="/portfolio/?c=web">Web Design</a></li>
   <li><a href="/portfolio/?c=motion">Motion</a></li>
   <li><a href="/portfolio/?c=print">Print design</a></li>
  </ul>
 </li>
 <li><a href="/links/">Links</a></li>
 <li><a href="/contact/">Contact</a></li>
</ul>