原生js实现下拉菜单

<style>
.one li{ width:100px; height:30px; line-height:30px; background:url(nav/libg.jpg) no-repeat; float:left; text-align:center; margin-left:10px; cursor:pointer; _display:inline; position:relative;}
li ul{ position:absolute; left:0; top:30px; display:none;}
</style>
<ul class="one">
<li id="li01">
<span>一级菜单</span>
<ul id="ul01">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li id="li02">
<span>一级菜单</span>
<ul id="ul02">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li id="li03">
<span>一级菜单</span>
<ul id="ul03">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>

function fn(canshu1,canshu2){
var li01 = document.getElementById(canshu1);
var ul01 = document.getElementById(canshu2); li01.onmouseover = function(){
ul01.style.display = "block"
}
li01.onmouseout = function(){
ul01.style.display = "none"
}
}
fn("li01","ul01")    
fn("li02","ul02")    
fn("li03","ul03")