简单给两段代码：
html和css部分：
<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>
javascript部分：
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")
亮个效果图：
原生js实现下拉菜单
原文地址：http://www.cnblogs.com/0dhw/p/7827418.html