web前端 杭州小白
群里有人用CSS实现纯CSS导航,其实这样网上也有很多的,不过下面的测试兼容还不错。发出来共享。
<style type=”text/css”>
#nav{width:900px;height:33px;background:#188FE7;}
#nav a{display:block;width:84px;height:33px;line-height:33px;float:left;text-align:center;color:#fff;position:relative; text-decoration:none;font-size:12px;}
#nav a:hover{background:#4AC2F0;}
#nav a:hover best collaboration software.nva_jia{ visibility:visible;}
.nva_jia{
position:absolute;
width:200px;
height:200px;
visibility:hidden;
background:#D6EDF8;
border:1px #4ac2f0 solid;
*left:0px;
*top:33px;
border-top:none;
border-radius:0 0 5px 5px;
}
</style>
<body>
<div id=”nav”>
<a class=”frist” href=”#”>首页<div class=”nva_jia”></div></a>
<a href=”#”>新闻导航<div class=”nva_jia”>这里面是你的次级导航内容</div></a>
<a href=”#”>业务领域<div class=”nva_jia”>这里面是你的次级导航内容</div></a>
<a href=”#”>新闻导航<div class=”nva_jia”>这里面是你的次级导航内容</div></a>
<a class=”last” href=”#”>新闻导航 <div class=”nva_jia”>这里面是你的次级导航内容</div></a>
</div>
</body>
注:其实纯CSS实现导航。本人觉得。想法是不错的。但是实际的应用中。做的话,感觉会出现很多问题。大家自己发觉!!