下拉菜单效果的实现方法----css+javascript

html代码
<ul id="nav">
<li>传智播客网页设计学院
<ul id="box1">
<li>网页设计</li>
<li>平面设计</li>
<li>UI设计</li>
<li>flash广告设计</li>
</ul>
</li>
</ul>
JS代码
<script type="text/javascript">
function change(id,mode){
document.getElementById(id).style.display=mode;
}
</script>
css代码
#nav{width:440px;height:24px;background:#ccc;margin:100px auto 0;}
#nav li{width:150px;height:24px;line-height:24px;float:left;margin-right:10px;background:yellow;text-align:center;cursor:pointer; position:relative;_display:inline;}
#nav li ul{position:absolute;top:24px;left:0;display:none;}
#nav li:hover ul{display:block;}

下拉效果.png (2.46 KB, 下载次数: 0)