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

本文固定链接: http://www.xiaobai8.com/Blog/295.html | web前端,杭州小白的个人博客,小白的个人博客

该日志由 杭州-小白 于2011年10月27日发表在 CSS 分类下,
原创文章转载请注明: 纯CSS实现导航 | web前端,杭州小白的个人博客,小白的个人博客
关键字: , ,

报歉!评论已关闭.