实现如图效果
html代码：
<html>
<head>
<title>div</title>
<link rel = "stylesheet" type="text/css" href = "layout.css">
</head>
<body>
<ul id="nav">
<li><a href="">文章</a>
<ul id="nav2">
<li><a href="">CSS教程</a></li>
<li><a href="">DOM教程</a></li>
<li><a href="">XML教程</a></li>
<li><a href="">Flash教程</a></li>
</ul>
</li>
<li><a href="">参考</a>
<ul id="nav2">
<li><a href="">XHTML</a></li>
<li><a href="">XML</a></li>
<li><a href="">CSS</a></li>
</ul>
</li>
<li><a href="">Blog</a>
<ul id="nav2">
<li><a href="">全部</a></li>
<li><a href="">网页技术</a></li>
<li><a href="">UI技术</a></li>
<li><a href="">Flash技术</a></li>
</ul>
</li>
<li><a href="">娱乐</a>
<ul id="nav2">
<li><a href="">摇滚</a></li>
<li><a href="">纯音乐</a></li>
<li><a href="">古典金曲</a></li>
<li><a href="">电影原声</a></li>
</ul>
</li>
</ul>
</body>
</html>
layout.css:
ul {
padding:0;
margin:0;
list-style:none;
}
li{
float:left;
width:160px;
text-align:center;
}
li ul{
display:none;
top:20px;
}
li:hover ul, li.over ul {
display:block;
}
#nav li a{
display:block;
font-size:20px;
border:1px solid #ccc;
padding:3px;
text-decoration:blink;
color:#777;
}
ul li a:hover {
background-color:#f4f4f4;
}
#nav2 li a{
font-size:12px;
}
网友评论