<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding:0; } #nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/ background: #eee; width: 600px; height: 40px; margin: 0 auto; } #nav ul{/*去掉点点*/ list-style: none; } #nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/ float: left; line-height: 40px; text-align: center; position: relative;/*给子ul定位用的*/ } #nav ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/ text-decoration: none; color:#000; padding:0 10px; display: block; } #nav ul li a:hover{ color: #fff; background-color: #666; } #nav ul li ul { position: absolute;/*相对于父li的位置进行定位*/ left: 0; top:40px; display: none; } #nav ul li ul li{ float: none; background-color:#eee; } </style> <!--js代码--> <script> <!--显示--> function show(li){ var sub=li.getElementsByTagName("ul")[0]; sub.style.display="block"; } <!--隐藏--> function hide(li){ var sub=li.getElementsByTagName("ul")[0]; sub.style.display="none"; } </script> </head> <body> <div id="nav"> <ul> <li><a href="#">首页</a></li> <!--onmouseover onmouseout--> <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">课程大厅</a> <ul> <li><a href="#">Javascript</a></li> <li><a href="#">Jquery</a></li> </ul> </li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li onmouseover="show(this)" onmouseout=""><a href="#">关于我们</a> <ul> <li><a href="#">Javascript</a></li> <li><a href="#">Jquery</a></li> </ul> </li> </ul> </div> </body> </html>
在网上找到的，感觉挺有用，备份一下而已。