形行色色的下拉菜单（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 ...
随机推荐
- Swift3.0语言教程使用字符串创建和初始化字符串
Swift3.0语言教程使用字符串创建和初始化字符串 Swift3.0语言教程使用字符串创建和初始化字符串,在编程语言中,字面值是很常见的数据描述形式.人们可以通过字面所表达的意思,获知其含义,尤其是 ...
- 图论 SRM 674 Div1 VampireTree 250
Problem Statement You are a genealogist specializing in family trees of vampires. Vampire famil ...
- 流式大数据处理的三种框架：Storm，Spark和Samza
许多分布式计算系统都可以实时或接近实时地处理大数据流.本文将对三种Apache框架分别进行简单介绍,然后尝试快速.高度概述其异同. Apache Storm 在Storm中,先要设计一个用于实时计算的 ...
- 第一天 Linux 是什么
众所周知,Linux的核心原型是1991年由托瓦兹(Linus Torvalds)写出来 计算机是由一堆硬件所组成的,为了有敁率的控制这些硬件资源,于是乎就有操作系统产生了. 到了1985 ...
- 【POJ】3744 Scout YYF I
http://poj.org/problem?id=3744 题意:直线上n个地雷,n<=10,范围在[1, 100000000],每一次有p的概率向前走一步,1-p的概率向前走两步,问安全通过 ...
- 【BZOJ3439】Kpm的MC密码 trie树+主席树
Description 背景 想Kpm当年为了防止别人随便进入他的MC,给他的PC设了各种奇怪的密码和验证问题(不要问我他是怎么设的...),于是乎,他现在理所当然地忘记了密码,只能来解答那些神奇的身 ...
- 【Java】RuleSource约束常用方法整理
1-常用约束规则RuleSource的设置方法 例如: addRules(new Rules(ProgramFeeItem.class){ protected void initRules() { ...
- 【Eclipse】 Alt+/ 代码提示问题解决方案
一般情况下alt+/有代码提示作用,还有代码提示的快捷代码也不是alt+/,因此要恢复代码提示用alt+/.需要做两件事. 在 Window - Preferences - General - Key ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 初识WebSocket
众所周知,Http协议是无状态的,并且是基于Request/Response的方式与服务器进行交互,也就是我们常说的单工模式.但是随着互联 网的发展,浏览器与服务端进行双向通信需求的增加,长轮询向服务 ...