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>
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
