最近在无聊着，试着学了点css，挺好玩的，做了个下拉菜单：
|
<ul id="nav">
<li><a href="#">文章</a>
<ul>
<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>
<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>
<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>
<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>
</ul>
|
CSS部分的代码：
|
<style>
#nav {
height:26px;
border-bottom:2px solid #FFFF00;
}
#nav li{
float:left
}
#nav li a {
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#CCCCCC;
margin-left:2px;
}
#nav li a:hover
{
background-color:#009999;
color:#FFFFFF;
}
#nav li a#current{
background-color:#CC3300;
color:#FFFFFF;
}
#category
{
width:100px;
border-right:1px solid #0099FF;
border-bottom:1px solid #0099FF;
border-left:1px solid #0099FF;
}
#category h1
{
margin:0px;
padding:4px;
font-size:12px;
font-weight:bold;
border-top:1px solid #0099FF;
background-color:#CCCCCC;
}
#category h2
{
margin:0px;
padding:4px;
font-size:12px;
font-weight:normal;
}
ul {
padding: 0;
margin: 0;
list-style:none;
}
li
{
float:left;
width:160px;
}
li ul
{
display:none;
top:20px;
}
li:hover ul,li.over ul
{
display:block;
}
ul li a
{
display:block;
font-size:12px;
border:1px solid #fff;
padding:3px;
text-decoration:none;
color:#777;
}
ul li a:hover
{
background-color:#FF6600;
}
</style>
|
阅读(625) | 评论(0) | 转发(0) |
