标签：log title line hover pac bsp 浮动 float 需要
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="blog%20css.css" type="text/css"/> <title>二级菜单</title> </head> <body> <div id="nav"> <ul> <li><a href="#">首 页</a> </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> </ul> </div> </div> </body> </html>
*{ margin:0; padding:0;
} /*可以去除浏览器默认的样式*/ #nav{ background-color:#eeeeee; width: 600px; margin:0 auto;/*导航条横向居中*/ height: 40px; } ul{ list-style: none; } ul li{ float: left; text-align: center;/*导航条文字垂直居中*/ line-height: 40px; position: relative;/*相对定位使得二级菜单在对应的一级菜单下显示*/ } a{ text-decoration: none; color:black; display: block;/*配合padding使用，让a块状占满整个li*/ padding:0 10px; } a:hover{ background-color:black; color:#fff; } ul li ul li{ float: none;/*取消二级菜单的浮动，使其恢复竖向显示*/ background-color:#eeeeee; margin-top: 1px; white-space: nowrap;/*强制二级菜单长度超过父级时候不换行，如果是英文或者数字则不需要*/ } ul li ul{ position: absolute;/*以浏览器为（0,0）位置进行定位,且不会因为二级菜单过长而撑开一级菜单*/ left:0; top: 40px; display: none;/*使得初始时候二级菜单隐藏*/ } ul li:hover ul{ display: block;/*使得鼠标经过一级菜单时候二级菜单显示*/ }
标签：log title line hover pac bsp 浮动 float 需要
原文地址：http://www.cnblogs.com/yzhweb/p/7362345.html
