直接用CSS的 hover实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <div id="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">课程大厅</a> <ul> <li><a href="">javascript</a></li> <li><a href="">angularJS</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> <ul> <li><a href="">淘宝网</a></li> <li><a href="">百度首页</a></li> <li><a href="">腾讯官网</a></li> </ul> </li> <li><a href="">关于我们</a></li> </ul> </div> </body> </html>
*{ padding: 0; margin: 0; } #nav{ 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; } ul li a{ padding: 0 10px; text-decoration: none; color: black; display:block; height: 40px; } a:hover{ color:white; background-color: purple; } ul li ul li{ float: none; background: #eee; margin-top: 2px; } ul li ul { /* 利用定位解决二级菜单宽度过宽影响一级菜单的问题*/ position: absolute; left: 0px; top: 40px; display: none; } ul li ul li a{ /*IE7兼容性*/ width: 80px; } ul li ul li a:hover{ background-color: blue; } ul li:hover ul{ display: block; }
js实现下拉二级菜单 onmouseover onmouseout 样式的话和上面的差不多，删掉最后一段就行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <div id="nav"> <ul> <li><a href="">首页</a></li> <li onmouseover="show(this)" onmouseout="hide(this)"><a href="">课程大厅</a> <ul> <li><a href="">javascript</a></li> <li><a href="">angularJS</a></li> <li><a href="">jQuery</a></li> </ul> </li> <li onmouseover="show(this)" onmouseout="hide(this)"><a href="">学习中心</a> <ul> <li><a href="">总体介绍</a></li> <li><a href="">教师资源</a></li> <li><a href="">学校设施</a></li> </ul> </li> <li onmouseover="show(this)" onmouseout="hide(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> </ul> </div> <script type="text/javascript"> function show(li){ var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="block"; } function hide(li){ var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="none"; } </script> </body> </html>
jQuery 实现 this. children("ul") show() hide()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <div id="nav"> <ul> <li><a href="">首页</a></li> <li class="navmenu"><a href="">课程大厅</a> <ul> <li><a href="">javascript</a></li> <li><a href="">angularJS</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 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> </ul> </div> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript"> $(function(){ $(".navmenu").mouseover(function(){ $(this).children('ul').show(); }); $(".navmenu").mouseout(function(){ $(this).children('ul').hide(); }); }); </script> </body> </html>