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 相关文章推荐
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
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
php中explode与split的区别介绍
2012/10/03 PHP
PHP 正则表达式小结
2015/02/12 PHP
Javascript MD4
2006/12/20 Javascript
Div Select挡住的解决办法
2008/08/07 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python实现excel转sqlite的方法
2017/07/17 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python处理RSTP视频流过程解析
2020/01/11 Python
接口的多继承会带来哪些问题
2015/08/17 面试题
环保倡议书
2014/04/14 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
小学生通知书评语
2014/12/31 职场文书
第一军规观后感
2015/06/12 职场文书
ant design vue的form表单取值方法
2022/06/01 Vue.js