纯CSS下拉导航和jquery下拉导航对比

纯css实现的下拉导航demo：http://codepen.io/tianzi77/pen/xGOyxp

不用javascript以及jquery动态效果实现导航条的下拉效果。纯css属性实现，主要应用到绝对定位中的left：auto和left：-9999px；来隐藏或者鼠标经过的时候显示下拉菜单。

htm结构：

<ul class="nav">
    <li><a href="/">小哲</a></li>
    <li><a href="/">小哲</a></li>
    <li><a href="">小哲</a>
    <ul>
    <li><a href="">小哲</a></li>
    <li><a href="">小哲</a></li>
    <li><a href="">小哲</a></li>
    </ul>
    </li>
    </ul>

css样式：

body {
   font-family: "微软雅黑";
   font-size: 1.4em;
   margin-top: 4em;
}

ul.nav, ul.nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
float: left;
border: 1px solid #486B02;
background-color: #8BD400;
}

ul.nav li {
float: left;
width: 8em;
text-align: center;
}

ul.nav li ul {
position: absolute;
width: 8em;
left: -999em;
margin-left: -1px;
}

.nav li:hover ul {
left: auto;
}

ul.nav a {
display: block;
color: #2B3F00;
       text-decoration: none;
padding: 0.3em 1em;
        border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;*/
}

ul.nav li li a {
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;

border-left: 0;
border-right: 0;
text-align: center;
}

ul.nav li:last-child a {
border-right: 0;
border-bottom: 0;
}

ul a:hover,
ul a:focus {
color: #E4FFD3;
background-color: #6DA203;
}

还有一种就是利用css加jquery实现一些更炫酷的下拉菜单导航条：

demo：http://codepen.io/tianzi77/pen/Pqzywv

html结构：

<div id="header">
    <ul id="navigation">
        <li><a href="#">首页</a></li>
        <li><a href="#">天子</a>
        <ul class="subnav">
            <li><a href="#">tianzi</a></li>
            <li><a href="">tianzi</a></li>
            <li><a href="#">tianzi</a></li>
        </ul>
        </li>
        <li><a href="#">服务</a>
            <ul class="subnav">
                <li><a href="#">liuzhe</a></li>
                <li><a href="#">liuzhe</a></li>
            </ul>
        </li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系</a></li>
    </ul>

样式：

*{
    padding: 0;
    margin: 0;
}
ul#navigation{
    list-style-type: none;
    background: orange;
    height: 63px;
    font-size: 24px;
    width: 1000px;
    border-radius: 50px;
    margin: 50px auto;
}
ul#navigation li{
    float: left;
    width: 175px;
    text-align: center;
    position: relative;
    height: 63px;
    padding: 20px 2px 10px 5px;
}
ul#navigation li a{
    color: #fff;
    text-decoration: none;
    display: block;
    font-family: "微软雅黑";
}
ul#navigation li a.active{
    color: yellow;
}
ul#navigation li ul.subnav{
    background: #e7f1d2;
    width: 175px;
    clear: both;
    display: none;
    position: absolute;
    top: 63px;
    border-radius: 10px;
    border-left: 2px solid #998;
    border-right: 2px solid #998;
    border-bottom: 2px solid #998;
    list-style-type: none;
}
ul#navigation li ul.subnav li{
    clear: both;
    height: 40px;
    padding: 0;
    text-align: center;
    margin: 0px;
}
ul#navigation li ul.subnav li a{
    background: none;
    font-size: 18px;
    color: #333;
    text-decoration: none;
    padding: 10px 0;
    border:none;
}
ul#navigation li ul.subnav li a:hover{
    background: #dbf1ad;
    font-size: 18px;
    color: #333;
    border-radius: 10px;
}

jquery动态效果：

$(function(){

$("#navigation li").hover(function(){

$(this).find(".subnav").slideDown("slow");

$(this).find("a").addClass("active");

},

function(){

$(this).find(".subnav").slideUp("fast");

$(this).find("a").removeClass("active");

})

})

效果图：