jQuery顶部固定层下拉导航菜单代码特效

使用方法：

引入CSS样式、jQuery库文件、插件JS文件

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"  src="js/nav.js"></script>

HTML结构

<div class="nav_z">
    <ul id="navul" class="cl">
        <li>
            <a href="#">新闻</a>
            <ul>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">企业资质</a></li>
                <li><a href="#">服务团队</a></li>
            </ul>
        </li>
        <li>
            <a href="#">视频</a>
            <ul>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">企业资质</a></li>
                <li><a href="#">服务团队</a></li>
            </ul>
        </li>
        <li>
            <a href="#">音乐</a>
            <ul>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">企业资质</a></li>
                <li><a href="#">服务团队</a></li>
            </ul>
        </li>
        <li>
            <a href="#">图片</a>
            <ul>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">企业资质</a></li>
                <li><a href="#">服务团队</a></li>
            </ul>
        </li>
        <li>
            <a href="#">购物</a>
            <ul>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">企业资质</a></li>
                <li><a href="#">服务团队</a></li>
            </ul>
        </li>
        <li>
            <a href="#">小说</a>
            <ul>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">企业资质</a></li>
                <li><a href="#">服务团队</a></li>
            </ul>
        </li>
        <li>
            <a href="#">社区</a>
            <ul>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">企业资质</a></li>
                <li><a href="#">服务团队</a></li>
            </ul>
        </li>
        <li>
            <a href="#">笑话</a>
            <ul>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">企业资质</a></li>
                <li><a href="#">服务团队</a></li>
            </ul>
        </li>
        <li>
            <a href="#">游戏</a>
            <ul>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">企业资质</a></li>
                <li><a href="#">服务团队</a></li>
            </ul>
        </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>

初始化插件

$(".navbg").capacityFixed();