二级导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.qq {
1050px;
height: 50px;
border: 1px solid #ccc;
margin: 120px;
}
ul,li {
list-style: none;
}
.qq ul li {
float: left;
150px;
height: 50px;
text-align: center;
line-height: 50px;
}
.qq ul li a {
display: block;
150px;
height: 50px;
}
.qq ul li a:link,.qq ul li a:visited {
text-decoration: none;
background-color: purple;
color: pink;
}
.qq ul li a:hover {
background-color: orange;
font-weight: bold;
color: red;
}
.qq ul li ul {
position: absolute;
}
.qq ul li ul li {
float: none;
}
.qq ul li ul li a {
border-right: none;
border-top: 1px dotted gray;
background: #f5f5f5;
}
.qq ul li ul{
position: absolute;
display: none;
}
.qq ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<div class="qq">
<ul>
<li><a href="#">个人中心</a>
<ul>
<li><a href="#">说说</a></li>
<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>
<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>
<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>
<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>
<ul>
<li><a href="#">浪漫</a></li>
<li><a href="#">风景</a></li>
<li><a href="#">美女</a></li>
<li><a href="#">动物</a></li>
</ul>
</li>
</ul>
</div>
