纯css写的导航
以下是我在实践过程中记录下来的使用css写的导航栏。
我个人认为能用css解决的问题，就不要使用js处理，渲染都会快一点。
效果图如下：
附上源码：
HTML：
1 <div class="nav"> 2 <div class="main_1200"> 3 <div class="logo fl">logo</div> 4 <div class="nav_nav fr"> 5 <ul> 6 <li><a href="/">首页</a></li> 7 <li><a href="/" class="nav_after">理财产品</a> 8 <ul> 9 <li><a href="/">A股产品</a></li> 10 <li><a href="/">信托基金</a></li> 11 <li><a href="/">资产配置</a></li> 12 13 </ul> 14 </li> 15 <li><a href="/">海外服务</a></li> 16 <li><a href="/">关于我们</a></li> 17 </ul> 18 </div> 19 </div>
css：
1 ul,li{padding: 0;margin:0;} 2 html{font-family: "微软雅黑";font-size: 14px;} 3 li{list-style-type: none;} 4 a{text-decoration: none;color: #333;transition: color 0.3s; outline: none;} 5 .main_1200{width: 1200px; margin: 0 auto;height: auto;} 6 .fl{float: left;} 7 .fr{float: right;} 8 .nav{height:66px;box-shadow: 0px 0px 3px #ccc;} 9 .logo{width: 40%;} 10 .logo img{padding: 10px 0 0;} 11 .nav_nav > ul > li{float: left;position: relative;margin: 0 5px 0 0;line-height: 66px;height: 66px;transition: all 0.3s;} 12 .nav_nav > ul > li:hover{background: #f5f5f5;} 13 .nav_nav > ul > li:hover > ul{top: 65px;opacity: 1;} 14 .nav_nav > ul > li > a{color: #000;padding: 0 25px;font-size: 16px;} 15 .nav_nav > ul > li > ul{position: absolute;top: 0px;transition: all 0.3s;opacity: 0;width: 500px; background:#fff;border-radius: 3px;box-shadow: 0px 1px 3px #666;z-index: -1;} 16 .nav_nav > ul > li > ul li{float: left; transition: all 0.3s;} 17 .nav_nav > ul > li > ul li:hover{background: #f5f5f5;} 18 .nav_nav > ul > li > ul li a{padding: 0 35px;color: #000;font-size: 14px;} 19 .nav_after:before{height: 10px;content: "";border-top: 4px #666 solid;border-right: 4px solid transparent;border-left: 4px solid transparent;position: relative; top:11px; right: -78px; vertical-align: middle;}
以上就是附录的所有代码。我是初学者，还望大神们多多指正。
