日期:2014-05-17  浏览次数:20580 次

Css实现---导航菜单

<!---Css Program--->
<style type="text/css">?
*{margin:0;padding:0;}??
.menu{
???? font-size:18px;
???? position:relative;
???? z-index:100;
???? }??
.menu ul{list-style:none;}??
.menu li {float:left;position:relative;}??
.menu ul ul {
????????? visibility:hidden;
????????? position:absolute;
????????? left:3px;top:23px;
????????? }??

.menu ul li:hover ul,??
.menu ul a:hover ul{visibility:visible;/*显示*/}??
.menu ul ul{}??
.menu ul ul li {
???????????? clear:both;
???????????? text-align:left;
????????????? font-size:12px;
?????????? }??
.menu ul ul li a{
???? display:blulock;
???? width:100px;
???? height:15px;
???? margin:0;
???? border:0;
???? border-bottom:1px solid #858685;
???? }??
.menu ul ul li a:hover{
?????? border:0;
?????? background:#fafafa;
?????? border-bottom:1px solid #fff;}??
.menu a{
???? display:block;
???? border:1px solid #aaa;
???? background:#3f3f3f;
???? padding:2px 10px;
???? margin:3px;
???? color:#fff;
???? text-decoration:none;}??
.menu a:hover{
??????? background:#fafafa;
??????? color:#000;
??????? border:1px solid #000;}??
.menu table {position:absolute; top:0; left:0;}??
</style>??

<!---Html Program--->?
<div class="menu">?
????????? <ul>?
????????????? <li><a href="#">XHTML/CSS??
????????????????? <ul>?
????????????????????? <li><a href="#">标准</a></li>?
????????????????????? <li><a href="#">教程</a></li>?
????????????????????? <li><a href="#">技术文章</a></li>?
????????????????????? <li><a href="#">常见问题</a></li>?
????????????????????? <li><a href="#">布局教程专题</a></li>?
????????????????????? <li><a href="#">CSS菜单</a></li>?
????????????????????? <li><a href="#">浏览器兼容</a></li>?
????????????????????? <li><a href="#">滚动条相关</a></li>?
????????????????????? <li><a href="#">圆角矩形专题</a></li>?
????????????????????? <li><a href="#">CSS特效欣赏专题</a></li>?
????????????????? </ul>?
??????????????? </li>?????

?


?????????????? <li><a href="#">XHTML/CSS??
????????????????? <ul>?
????????????????????? <li><a href="#">标准</a></li>?
????????????????????? <li><a href="#">教程</a></li>?
????????????????????? <li><a href="#">技术文章</a></li>?
????????????????????? <li><a href="#">常见问题</a></li>?
????????????????????? <li><a href="#">布局教程专题</a></li>?
????????????????????? <li><a href="#">CSS菜单</a></li>?
????????????????????? <li><a href="#">浏览器兼容</a></li>?
????????????????????? <li><a href="#">滚动条相关</a></li>?
????????????????????? <li><a href="#">圆角矩形专题</a></li>?
????????????????????? <li><a href="#">CSS特效欣赏专题</a></li>?
????????????????? </ul>?
??????????????? </li>???????????????
????????? </ul>?
</div>