js代码实现下拉菜单【推荐】


Posted in Javascript onDecember 15, 2016

效果:

js代码实现下拉菜单【推荐】

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 原型继承介绍
Aug 30 Javascript
浅析node.js中close事件
Nov 26 Javascript
js返回顶部实例分享
Dec 21 Javascript
如何编写jquery插件
Mar 29 jQuery
JavaScript中各数制转换全面总结
Aug 21 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
React实现全选功能
Aug 25 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 #Javascript
JavaScript常见的五种数组去重的方式
Dec 15 #Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 #Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 #Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 #Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 #Javascript
JavaScript实现Fly Bird小游戏
Dec 15 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
JS自定义滚动条效果
2020/03/13 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python查看模块,对象的函数方法
2018/10/16 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python面向对象实现方法总结
2020/08/12 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
高中考试作弊检讨书
2014/01/14 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
大学生毕业鉴定
2014/01/31 职场文书
大家检讨书5000字
2014/02/03 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
神农溪导游词
2015/02/11 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis