当前位置:
首页 > 网站相关 > div+css > 分享一个纯css的下拉,很简洁好用

分享一个纯css的下拉,很简洁好用

<div id="nav">
<ul>
<li><a href="/index.php" target="_self">Home</a></li>
<li><a href="/index.php" target="_self">Home</a></li>
<li><a href="/index.php" target="_self">Home</a>
<ul>
<li><a href="/index.php" target="_self">Home</a></li>
<li><a href="/index.php" target="_self">Home</a></li>
<li><a href="/index.php" target="_self">Home</a>

</li>
</ul>
</li>
</ul>
</div>

#nav {float:left; height:43px;  font-weight:bold;}
#nav a {color:#FFFFFF; display: block; text-align:center; font-size:13px;} /*一级菜单链接总体样式:每个菜单的宽,居中对齐,文字大小*/
#nav a:link { color:#FFFFFF; text-decoration:none;margin:0;}     /* 未访问的链接 */
#nav a:visited {color:#FFFFFF; text-decoration:none;margin:0;}    /* 已访问的颜色 */
#nav a:hover {color:#ffff00; text-decoration:none;}
#nav li {
float: left; width:98px; text-align:right;
}
#nav li a:hover{

}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:center;
left: -999em; width: 150px; position: absolute;
}
#nav li ul li{
float: left; width: 150px;
margin-left:10px;
background: #F6F6F6;
FILTER: Alpha(Opacity=85);

}
#nav li ul a{ wedisplay: block; width: 146px;text-align:center;padding-left:4px;
}
#nav li ul a:link {
font-size:14px;color:#c71448; text-decoration:none;
}
#nav li ul a:visited {
color:#c71448;font-size:14px; text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}