天兴工作室

zblog下拉导航这东西天兴工作室已经写了好多篇文章了，照例还是要吐槽下zblog的导航栏，一直都是那么稳定的烂！

今天来分享一个带特效的下拉导航代码，特效大概是这样的：鼠标放上去，像抽屉一样慢慢展开下拉导航，所以就起名叫“抽屉式下拉导航”。

直接上代码。

html部分：

<div class="nav">
    <ul>
        <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>
</div>

jQ部分：

             <script type="text/javascript">
                    $(document).ready(function(){
                        $(".nav li").hover(function(){
                            $(this).find("ul").slideDown("slow");    
                        },function(){
                            $(this).find("ul").slideUp("fast");    
                        });
                    });
                </script>

css部分：

.nav{position: relative;line-height: 40px;height: 40px;}
.nav>ul>li{float:left;}
.nav>ul>li>a{padding:0 20px;}
.nav>ul>li>ul{display: none;position: absolute;overflow: visible;width: 150px;}
.nav>ul>li>ul>li{float: none; width:100%;}
.nav>ul>li>ul>li>a{padding:0 12px;display: block;}

注意部分：

需要引用JQ库，1.4以上版本都可以；

其他css颜色，宽度等等需要自行定义。

另直接附上一个完整的html页面：点击查看。