形行色色的下拉菜单（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 ...
随机推荐
- JQ学习（三）-ajax
jQuery - AJAX jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法 ...
- springMVC 的工作原理和机制（转）
工作原理上面的是springMVC的工作原理图: 1.客户端发出一个http请求给web服务器,web服务器对http请求进行解析,如果匹配DispatcherServlet的请求映射路径(在web. ...
- POJ 3274 HASH
题目链接:http://poj.org/problem?id=3274 题意+思路: 点击这里 补充:因为有减法运算,所以可能会造成运算后结果为负数,所以需要把结果统一转换成正数[不然数组下标访问不到 ...
- css整理－04 基本视觉格式化
基本框 假定每一个元素都会生成一个火多个矩形框,为元素框 元素框中心有一个内容区,周围有内边距,边距和外边距 内容的背景会应用到内边距,外边距是透明的,可以看到父元素的背景 内边距不能是负值,外边距可 ...
- SQL初级
SQL是一个微软开发的数据库,因为联系到很多内部服务程序和文件所以安装和删除的时候有些人会遇上些麻烦,如果安装失败了那就得完全删除后重装,然而他自己自带的删除系统并不是那么给力,所以悲剧就诞生了,不行 ...
- 06_Java多线程、线程间通信
1. 线程的概念 1.1多进程与多线程 进程:一个正在执行的程序.每个进程执行都有一个执行顺序,该顺序是一个执行路径,或叫一个控制单元. 一个进程至少有一个线程. 线程:就是进程中的一个独立 ...
- Java 生成16/32位 MD5
http://blog.csdn.net/codeeer/article/details/30044831
- OpenCV 线性混合（4）
带滚动条的线性混合示例: #include "stdafx.h" #include<iostream> #include<thread> #incl ...
- WebApi 2：属性路由 [Route()]，attribute routing
原文:http://www.asp.net/web-api/overview/web-api-routing-and-actions/attribute-routing-in-web-api-2 属性 ...
- jquery ajax 提交信息后等待返回的提示信息
最简单的方法: http://bbs.csdn.net/topics/390584283?page=1 $('#click').click(function){ $('#data').html('&l ...