纯CSS实现导航

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实现导航。本人觉得。想法是不错的。但是实际的应用中。做的话,感觉会出现很多问题。大家自己发觉!!