pc端常用导航

应为经常要写网站，导航部分基本一样，没必要每次都写一遍，下次直接来复制：

HTML:

<nav>
        <div class="clearfix container">
            <div class="nav_logo fl"><img src="images/logo_white.png" /></div>
            <div class="fl">
                <ul class="nav_bar clearfix">
                    <li><a href="#">首页</a></li>
                    <li class="menu_btn">
                        <a href="#">产品<span></span></a>
                        <ul class="nav_menu">
                            <li><a href="#">商城解决方案</a></li>
                            <li><a href="#">网络推广方案</a></li>
                            <li><a href="#">服务器租赁</a></li>
                        </ul>
                    </li>
                    <li><a href="#">微蜂营销</a></li>
                    <li><a href="#">移动支付</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">联系方式</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            $(".menu_btn").hover(function () {
                $(this).children(".nav_menu").show();
            }, function () {
                $(this).children(".nav_menu").hide();
            })
        })
    </script>

 

css:

/*global*/
@charset "utf-8";
/*CSS Reset*/
/*"微软雅黑","\5FAE\8F6F\96C5\9ED1","Microsoft YaHei"
"黑体","\9ED1\4F53"
"新宋体","\65B0\5B8B\4F53"
"宋体","\5B8B\4F53"
"幼圆"    ,"YouYuan","\5E7C\5706"
*/
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;word-wrap:break-all}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{min-height:100%;background-color:#fff;-webkit-font-26oothing:antialiased;-moz-osx-font-26oothing:grayscale;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{font-family:Arial,'微软雅黑',"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","simsun","\5B8B\4F53","宋体","\65B0\5B8B\4F53","新宋体";font-size:14px;color: #444;}
html,body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,hr,p,pre,span,strong,form,iframe,label,button,input,textarea,table,tr,th,td,fieldset,i{margin:0;padding:0;text-align:left}
dl,dd,ol,ul,li{list-style:none;list-style-type:none}
div{text-align:left;margin-left:auto;margin-right:auto}
i{display:inline-block;font-style:normal;font-weight:normal;text-align:center;vertical-align:middle}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:300}
a,a:link,a:visited,a:hover,a:active,a:focus,input,button,textarea,select,optgroup,option,a:focus,input:focus,button:focus,textarea:focus,select:focus,optgroup:focus,option:focus,label,label:focus{outline:none;text-decoration:none;-webkit-tap-highlight-color:rgba(255,0,0,0);-webkit-appearance: none;}
img{width:100%;border:0;vertical-align:middle}a img,img{-ms-interpolation-mode:bicubic}
a,a:link,a:visited{color:#333333;cursor:pointer}
a:hover,a:active{text-decoration:none}a.ie6:hover{zoom:1}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
input,button,textarea,select,optgroup,option{border:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;overflow:visible;vertical-align:middle;outline:none;border-radius:0;}
select {appearance:none;-moz-appearance:none;-webkit-appearance:none}select::-ms-expand { display: none; }select[multiple],select[size]{height:auto}
textarea{overflow-y:auto}
hr{height:0;margin:15px 0;border:0;border-top:1px solid #eee;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
b,strong{font-weight:700}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}
table{border-spacing:0;border-collapse:collapse}
header,footer,section,aside,article,main,nav,menu,details,summary,address,hgroup,figure,figcaption,legend{display:block;margin:0;padding:0}
audio,canvas,progress,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
legend{width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:0;border-bottom:1px solid #e5e5e5}
time{display:inline}
svg:not(:root){overflow:hidden}
fieldset{padding:0.35em 0.625em 0.75em;margin:0 2px;border:1px solid #c0c0c0}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}
area{outline:none;blr:expression(this.onFocus=this.blur())}
[hidden],template{display:none}
abbr[title]{border-bottom:1px dotted}
dfn{font-style:italic}
mark{color:#000;background:#ff0}
small{font-size:80%}
figure{margin:1em 40px}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
/*通用属性*/

/*清除浮动*/
.clearfix{*zoom:1;} /*解决ie6/7下面的浮动塌陷问题*/
.clearfix:before,
.clearfix:after{display:table; line-height:0; content:" ";} /*display:table;解决其他下面的浮动塌陷问题,line-height是将添加的内容高度设为0；*/
.clearfix:after{clear: both;}/*清楚浮动*/
.fl{float:left;}.fr{float:right;}


/*通用样式*/
.container{width:1200px;margin:0 auto;}

/*导航*/
nav{background-color:#0da3f9;}
nav a,nav a:link,nav a:visited{display:block;color:#fff;line-height:80px;font-size:18px;padding:0px 30px;}
.nav_logo img{height:40px;width:auto;margin-top:20px;}
.nav_bar{padding-left:50px;}
.nav_bar li{float:left;}
.menu_btn{position:relative;}
.menu_btn span{display:inline-block;width:15px;height:15px;background:url(../images/down.png) center 2px no-repeat;background-size:100% 100%;margin-left:10px;}
.nav_menu{position:absolute;background-color:rgba(255,255,255,0.9);padding:10px 0px 10px 0px;right:0px;width:180px;display:none;}
.nav_menu li{display:block;float:none;}
.nav_menu a,.nav_menu a:link,.nav_menu a:visited{display:block;color:#333;line-height:40px;font-size:18px;padding:0px 20px;}
.nav_menu a:hover{background-color:#eaeaea;}