石周明

CSS部分：

ul{
margin:0;
padding:0;
list-style:none;
}
li{
   float:left;
   width:160px;
   margin-left:1px;
   }
ul li a{
   display:block;
   font-size:12px;
   border:1px solid #CCC;
   padding:3px;
   text-decoration:none;
   color:#777;
   text-align:center;
   }
ul li a:hover{
   background-color:#0099CC;
   color:#FFFFFF;
   }
li ul{
   display:none;
   }
li:hover ul,li.over ul{
   display:block;

html部分：

<ul id="nav" >
<li><a href="">文章</a>
    <ul>
      <li><a href="">CSS 教程</a></li>
      <li><a href="">DOM 教程</a></li>
      <li><a href="">XML 教程</a></li>
      <li><a href="">Flash 教程</a></li>
    </ul>
</li>
<li><a href="">参考</a>
    <ul>
      <li><a href="">XHTML</a></li>
      <li><a href="">XML</a></li>
      <li><a href="">CSS</a></li>
    </ul>
</li>
<li><a href="">博客</a>
    <ul>
      <li><a href="">全部</a></li>
      <li><a href="">网页技术</a></li>
      <li><a href="">UI 技术</a></li>
      <li><a href="">Flash 技术</a></li>
    </ul>
</li>
<li><a href="">摇滚</a>
    <ul>
      <li><a href="">纯音乐</a></li>
      <li><a href="">古典金曲</a></li>
      <li><a href="">UI 技术</a></li>
      <li><a href="">Flash 技术</a></li>
    </ul>
</li>
</ul>

JS部分：

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

美观方面还需要再调整！