js代码实现下拉菜单【推荐】
2016-12-15 10:52
691 查看
效果:
js代码:
<script type="text/javascript"> function ShowSub(li) {//函数定义 var subMenu = li.getElementsByTagName("ul")[0] ;//获取 subMenu.style.display = " block "; } function HideSub(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = " none "; } </script>
css样式:
*{ margin:0px; padding:0px;} body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;} #nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;} ul{ list-style:none;} ul li{ float:left; line-height:40px; text-align:center; width:100px;}//ie7显示宽度的兼容性 设置width 而不用padding的自适应 a{ text-decoration:none; color:#000; display:block;} a:hover{ color:#F00; background-color:#666;} ul li ul li{ float:none;background-color:#eee; margin:2px 0px;} ul li ul{ display:none;}
html代码
<div id="nav"> <ul> <li><a href="#">首页</a></li> <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)" ><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">Html/CSS</a></li> </ul> </li> <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)" ><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">实例练习</a></li> <li><a href="#">问与答</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- 最简单js代码实现select二级联动下拉菜单
- 最简单js代码实现select二级联动下拉菜单(测试通过)
- 下拉菜单点击实现连接跳转的js代码
- 简单js代码实现selece二级联动(推荐)
- 最简单js代码实现select二级联动下拉菜单
- 简单js代码实现selece二级联动(推荐)
- 蛙蛙推荐:asp实现树型结构
- 推荐给初学者:通过ODBC?JDBC和SQL专用JDBC驱动实现简单的数据?
- C#(文字类型转换)【下拉菜单->C#字体CodeBehind】附:【用C#实现生成PDF文档】
- Asp.net+Xml+js实现无线级下拉菜单
- 实现无刷新闪烁二级联动下拉菜单(js实现)
- 蛙蛙推荐:asp.net实现分组全选部分复选框
- 三级级联下拉菜单实现
- [ASP开发]在Web项目中多维下拉菜单的实现技巧和方法
- [推荐] 基于.net的Grid实现:Alchemi
- Asp.net+Xml+js实现无线级下拉菜单
- 在做会员资料修改时,实现下拉菜单的默认项定位
- 推荐:用CSS实现的固定表头的HTML表格
- JavaScript实现下拉菜单对文本框赋值的小功能
- 蛙蛙推荐:分栏显示记录集的表格演示,并实现了分页