<!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>
</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;/*使得鼠标经过一级菜单时候二级菜单显示*/
}