<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<ul class="nav clearfix">
<li>
<a href=#>首页</a>
<ul class="icons">
<li><a href=#>页面1</a></li>
<li><a href=#>页面2</a></li>
<li><a href=#>页面3</a></li>
</ul>
</li>
<li><a href=#>关于</a></li>
<li>
<a href=#>下载</a>
<ul class="icons">
<li><a href=#>下载1</a></li>
<li><a href=#>下载2</a></li>
</ul>
</li>
<li><a href=#>博客</a></li>
</ul>
</div>
</body>
</html>
*{margin:0;padding:0;}
a{text-decoration: none;}
ul{list-style:none;}
body{background:#ccc;}
#container{
text-align:center;
padding:5px;
}
.clearfix{
content:‘‘;
display:block;
clear:both;
}
.nav{
display:inline-block;
border:1px solid #ddd;
border-right:none;
}
.nav li{
width:100px;
padding:15px;
text-align:center;
line-height:15px;
background-color:#fff;
}
.nav>li{
float:left;
border-right:1px solid #ddd;
position:relative;
}
.icons{
display:none;
position:absolute;
top:100%;
left:0;
margin-top:1px;
}
.nav>li:hover>.icons{
display:block;
}
时间： 2024-08-06 11:51:39