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

转载于 2012-08-14 19:30:43 发布 · 667 阅读

文章标签：

#javascript #html

javaScript 同时被 2 个专栏收录

122 篇文章

订阅专栏

div+css

10 篇文章

订阅专栏

本文介绍了一家提供网页设计、平面设计、UI设计、Flash广告设计等课程的学院，并详细阐述了如何通过JavaScript和CSS实现下拉菜单的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)