形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）
HTML/CSS方法实现下拉菜单
来源：慕课网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}/*清除所有默认格式*/
#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
/*一级菜单背景色，宽度，高度，上下边距为零左右居中*/
ul{ list-style:none;}/×清除ul固定格式（小点）×/
ul li{ line-height:40px; text-align:center;float:left;}
/×行距，文字居中，浮动横向显示×/
a{ text-decoration:none; color:#000; display:block; width:90px;}
/×a{ color:#000; text-decoration:none; padding-top:4px; display:block; width:97px; height:22px ;text-align:center; background-color:#ececec; margin-left:2px; list-style-type:none; }字体颜色，下划线，模型内部到顶部距离，显示，宽度，高度，文字居中，背景颜色，模型外部到左侧距离×/
a:hover{ color:#FFF; background-color:#666;}
/×鼠标掠过是，a标签链接颜色，背景颜色×/
ul li ul li{ float:none;margin-top:2px; background-color:#eee; }
/×清除浮动影响，上外边界间距，背景颜色×/
ul li ul{width:90px;display:none;}
/×二级菜单，默认不显示×/
ul li:hover ul{ display:block;}
/×鼠标掠过时，显示以块状元素显示ul二级菜单×/
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><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>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
ul{ list-style:none;}
ul li{ line-height:40px; text-align:center; float:left;}
a{ text-decoration:none; color:#000; display:block; width:90px;}
a:hover{ color:#FFF; background-color:red;}
ul li ul li{ float:none;margin-top:2px; background-color:#eee; }
ul li ul{width:90px; display:none;}
ul li:hover ul{display:block;}
</style>
</head> <body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><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>
</body>
</html>
JS方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
/*body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}*/
#nav{ width:600px;font-size:15px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}
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;}
</style>
<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>
</head> <body>
<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>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
/*body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}*/
#nav{ width:600px;font-size:15px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}
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;}
</style>
<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>
</head> <body>
<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>
</body>
</html>
jQuery方法实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; position:relative;}
a{ text-decoration:none; color:#000; display:block; width:90px;}
a:hover{ color:#FFF; background-color:#666;}
ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; }
ul li ul{ width:90px; position:absolute; left:0px; top:40px; display:none;}
</style> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show(); }) $(".navmenu").mouseout(function(){
$(this).children("ul").hide();
})
}) </script> </head> <body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="navmenu"><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul> </li>
<li class="navmenu"><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>
</body>
</html>
浏览器兼容性（css hover实现）+ 多级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title></title>
<style type="text/css">
.top-nav {
font-size: 12px;
font-weight: bold;
list-style: none;
}
.top-nav li {
float: left;
list-style: none;
margin-right: 1px;
}
.top-nav li a {
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
.top-nav li a:hover {
background: #900;
color: #FFF;
}
.top-nav ul {
list-style: none;
display: none;
width: 80px;
padding: 0;
position: relative;
}
.top-nav li ul li ul {
position: absolute;
top: 0;
left: 80px;
}
/* 使用CSS设置鼠标移动到一级菜单时，二级菜单显示，三级菜单隐藏 */ .top-nav li:hover ul {
display: block;
}
.top-nav li:hover ul li ul {
display: none;
}
/* 使用CSS设置鼠标移动到二级菜单时，三级菜单显示 */ .top-nav li ul li:hover ul {
display: block;
}
</style>
<script type="text/javascript">
window.onload = function() {
//判断是否为IE浏览器
var isIE = !!window.ActiveXObjet;
var isE6 = isIE && !window.XMLHttpRequest;
if (isIE6) {
var Lis = document.getElementsByTagName("li");
for (var i = 0; i < Lis.length; i++) {
Lis[i].onmouseover = function() {
var u = this.getElementsByTagName("ul")[0];
//如果包含子菜单，就将子菜单显示
if (u != undefined) {
u.style.display = "block";
}
}
Lis[i].onmouseout = function() {
var u = this.getElementsByTagName("ul")[0];
//如果包含子菜单，就将子菜单隐藏
if (u != undefined) {
u.style.display = "none";
}
}
}
}
}
</script>
</head> <body>
<ul class="top-nav">
<li><a href="#">慕课网首页</a>
<ul>
<li><a href="#">前端课程 +</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">css</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li><a href="#">手机开发</a>
<ul>
<li><a href="#">ios开发</a></li>
<li><a href="#">android开发</a></li>
<li><a href="#">WP开发</a></li>
</ul>
</li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">课程大厅</a> </li>
<li><a href="#">学习中心 +</a>
<ul>
<li><a href="#">前端课程 +</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">css</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li><a href="#">手机开发</a>
<ul>
<li><a href="#">ios开发</a></li>
<li><a href="#">android开发</a></li>
<li><a href="#">WP开发</a></li>
</ul>
</li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body> </html>
浏览器兼容性（js实现）+ 多级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title></title>
<style type="text/css">
.top-nav {
font-size: 12px;
font-weight: bold;
list-style: none;
}
.top-nav li {
float: left;
list-style: none;
margin-right: 1px;
}
.top-nav li a {
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
.top-nav li a:hover {
background: #900;
color: #FFF;
}
.top-nav ul {
list-style: none;
display: none;
width: 80px;
padding: 0;
position: relative;
}
.top-nav li ul li ul {
position: absolute;
top: 0;
left: 80px;
}
/* 使用CSS设置鼠标移动到一级菜单时，二级菜单显示，三级菜单隐藏 */
</style> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li").has("ul").mouseover(function(){
$(this).children("ul").css("display","block");
}).mouseout(function(){
$(this).children("ul").css("display","none");
})
})
</script>
</head> <body>
<ul class="top-nav">
<li><a href="#">慕课网首页</a>
<ul>
<li><a href="#">前端课程 +</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">css</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li><a href="#">手机开发</a>
<ul>
<li><a href="#">ios开发</a></li>
<li><a href="#">android开发</a></li>
<li><a href="#">WP开发</a></li>
</ul>
</li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">课程大厅</a> </li>
<li><a href="#">学习中心 +</a>
<ul>
<li><a href="#">前端课程 +</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">css</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li><a href="#">手机开发</a>
<ul>
<li><a href="#">ios开发</a></li>
<li><a href="#">android开发</a></li>
<li><a href="#">WP开发</a></li>
</ul>
</li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body> </html>
形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）的更多相关文章
- 简单实用的下拉菜单（CSS+jquery）
原文 简单实用的下拉菜单(CSS+jquery) 没什么可以说的,直接上例子 html+jquery代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- vue实现隔行换色，下拉菜单控制隔行换色的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- phpcms v9 下拉菜单 二级 三级子栏目调用方法
很多网站的导航栏可以实现下拉二级菜单,三级菜单等效果,今天我们就来分享phpcms v9 支持下拉菜单的方法,可以支持无限子栏目调用,具体写法如下: <ul> {pc:content ac ...
- jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS
一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类. 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单.感受一下j ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）
原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...
- 下拉的DIV+CSS+JS二级树型菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示
今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...
- zTree插件之多选下拉菜单代码
zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...
随机推荐
- java jdbc sqlhelper
package com.shop.util; import java.sql.*; //SqlHelper类 //定义了数据库连接函数,关闭查询结果集,关闭Statement对象,关闭数据库连接 // ...
- Console.log，Window.alert，Document.write三者区别
1.Console.log不会阻断程序继续进行,在控制台可以看到测试结果. 2.Window.alert弹出框会阻断程序运行,在弹出框可以看到测试结果. 3.Document.write不会阻断程序继 ...
- jQuery-插件，优化
jQuery应用: 1.表单验证: A:jQuery Validation插件:有时需要将验证的属性写在class中,有时需要将验证信息写在属性中,例如: <input id="cem ...
- DP ZOJ 2745 01-K Code
题目传送门 题意:要求任意连续子序列中0和1的数量差不超过k的方案数 分析:想好状态其实不难.dp[i][j][k]表示考虑前i长度,后缀中最大的 sum(0) - sum(1) = j, sum ( ...
- [转]走向视网膜（Retina）的Web时代
转载出处:http://www.w3cplus.com/css/towards-retina-web.html 维基百科将Retina译为“视网膜”."Retina"一词,原意是“ ...
- HTML图片元素（标记）
<html> <head> <title>第一个网页</title> </head> <body> ************** ...
- NoSql之MongoDB--Windows下数据库配置及初步使用
1.NoSql简介 NoSql(Not Only Sql)指的是非关系型的数据库.下一代数据库主要解决几个要点:非关系型的.分布式的.开源的.水平可扩展的.原始的目的是为了大规模web应用,这场 运动 ...
- The 2015 China Collegiate Programming Contest E. Ba Gua Zhen hdu 5544
Ba Gua Zhen Time Limit: 6000/4000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total ...
- BZOJ4707 : B君的技巧
建立线段树,设$f[x][l][r]$表示当前考虑$x$点,最左端是$l$,最右端是$r$的最少代价. 如果$a$在$x<<1$,$d$在$x<<1|1$, 设$g[a][c] ...
- NodeJS中 package.json 解析
package.json 中包含各种所需模块以及项目的配置信息(名称.版本.许可证等)meta 信息. 包含可配置项 name 名称 应用描述 description 版本号 version 应用的配 ...