纯CSS导航代码 二级导航代码 简洁 高效

可以直接下载附件

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

/*reset*/

ul{padding:0;list-style:none}

/*reset中加入*/

/* 网站导航 */

.navbg{background:#105FC9;}

.nav{margin:0 auto;width:960px;height:40px;position:relative;z-index:1;}

.nav .sub{display:none;top:40px;position:absolute;}

.nav .sub a{display:block;font-size:12px;height:30px;line-height:30px;}

.nav .sub a:hover{background:#1F76ED;color:#fff;}

.nav .sub li{height:30px;padding:0;}

.nav li {float:left;position:relative;height:40px;line-height:40px;}

.nav li a{color:#fff;font-size:12px;padding:0 28px;  text-align:center;display:block;width:60px;height:inherit;word-wrap:break-word;overflow:hidden;}

.nav li:hover{background:#0F57B9;}

.nav li:hover .sub{display:block;background:#0F57B9;}

<!--版本：1.0-->

<!--作者：GESON-->

<!--注解：基本没有垃圾的CSS标记，每一个都有用，实际修改和添加根据实际页面代码情况修改。控制溢出和内容容量的解决方案还不是很好，有机会改下，先发布吧，有更好的解决办法，可以给我留言-->

<!--代码交流QQ：271254669-->

</style>

</head>

<body>

<nav class="navbg">

<ul class="nav">

   <li><a href="/html5/tag_nos cript.asp">网站首页</a></li>

   <li>

       <a href="/html5/tag_nos cript.asp">我是栏目名名啊啊</a>

       <ul class="sub">

           <li><a href="/html5/tag_nos cript.asp">试试最多几个字啊啊啊啊啊啊啊</a></li>

           <li><a href="/html5/tag_nos cript.asp">Next</a></li>

           <li><a href="/html5/tag_nos cript.asp">Next</a></li>

       </ul>

   </li>

</ul>

</nav>

</body>

</html>