一个简单的二级下拉菜单

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<style type="text/css">
ul{
margin: 0;
padding: 0;
list-style: none;
clear:left;
}
ul .one{
line-height:22px;
width:80px;
}
ul li{
background:#000;
width:80px;
position:relative;
float:left;
display:inline;
}
ul li a{
color:#fff;
display:block;
height:25px;
line-height:25px;
text-align:center;
width:80px;
}
ul li a:hover{
color:red;
}
li ul{
display:none;
position: absolute;
left: 0px; /* Set 1px less than menu width */
top: 20;
width:80px;
}
li ul li{
margin-bottom:1px;
width:80px;
display:block;
float:left;
}
li ul li a{
width:80px;
display:block;
float:left;
}
ul li:hover ul,ul li.over ul{
display:block;
}
.subnav{
width:800px;
margin:0 auto;
text-align:center;
}
</style>
<script type="text/javascript">
strin = function(){
//alert("aa");
if(document.all && document.getElementById){
aa=document.getElementById("nuw");
//alert(aa.innerHTML);
for(var i=0;i<aa.childNodes.length;i++){
var bb = aa.childNodes[i];
//alert(bb.name);
if(bb.nodeName=="LI"){
//alert("bb.nodeName");
bb.οnmοuseοver=function(){
this.className="over";
}
bb.οnmοuseοut= function(){
this.className="";
}
}
else{
//alert("bb.nodeName");
}

}
//navRoot.childNodes.length
}
}
window.οnlοad=strin;
</script>
<div class="subnav">
<ul id="nuw">
<li class="one"><a href="#">首页</a></li>
<li class="one"><a href="#">新闻</a>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
</ul>
</li>
<li class="one"><a href="#">评论</a>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
</ul>
</li>
<li class="one"><a href="#">博客</a>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
</ul>
</li>
<li class="one"><a href="#">论坛</a>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
</ul>
</li>
</ul>
</div>