下拉菜单效果的实现方法----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)