标签：style blog http color io os java ar div
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <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="">JavaScipt</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>
*{ margin: 0; padding: 0; } #nav{ background: #eee; width: 600px; height: 40px; margin: 0 auto; } ul{ list-style-type: none; } ul li{ float: left; line-height: 40px; text-align: center; position: relative; } a{ height: 40px; display:block; text-decoration: none; color:#000; padding: 0 10px; /*不直接设置a的宽度而是设置左右内边距这样就可以使a自适应宽度*/ } a:hover{ color: #fff; background-color: #666; } ul li ul li { float: none; background-color: #eee; margin-top: 2px; } ul li ul{ position: absolute; /*以一级菜单绝对定位*/ left: 0; top: 40px; }
ul li ul{ display: none; /*先把二级菜单隐藏*/ } ul li:hover ul{ display: block; /*当鼠标经过一级菜单时二级菜单显示*/ }
标签：style blog http color io os java ar div
原文地址：http://www.cnblogs.com/jellyAndjammy/p/3989287.html
