下拉菜单太长，可以自动滚动的导航栏jquery代码

    下拉菜单太长，可以自动滚动的导航栏。当网站采用下拉菜单作为导航，如果下拉菜单的分类太多，就会导致滚动条向下滚动才能显示全。本插件完美解决这个问题，当下拉菜单太长，超出了设置的高度，鼠标放到下拉菜单上，向上或者向下移动鼠标，下拉菜单会做相应的滚动以显示全部的内容。 1、引入下面的代码：

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
#page-wrap{width:720px;margin:25px auto;}
/* 一级 */
ul.dropdown{position:relative;width:100%;}
ul.dropdown li{font-weight:bold;float:left;width:180px;background:#ccc;position:relative;}
ul.dropdown a:hover{color:#000;}
ul.dropdown li a{display:block;padding:20px 8px;color:#222;position:relative;z-index:2000;}
ul.dropdown li a:hover,
ul.dropdown li a.hover{background:#F3D673;position:relative;}
/* 二级 */
ul.dropdown ul{display:none;position:absolute;top:0;left:0;width:180px;z-index:1000;}
ul.dropdown ul li{font-weight:normal;background:#f6f6f6;color:#000;border-bottom:1px solid #ccc;}
ul.dropdown ul li a{display:block;background:#eee !important;}
ul.dropdown ul li a:hover{display:block;background:#F3D673 !important;}
</style>
<script type='text/javascript' src='http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>

2、html精简后的代码：

<div id="page-wrap">   
    <ul class="dropdown">
        <!--导航的一个栏目开始，多个栏目请复制下面的li来增加-->
        <li>
            <!--下面的a链接为一级导航-->
            <a href="#">一级导航名称</a>
            <ul class="sub_menu">
                <!--下面为下拉菜单，可以扩展无限个，当显示不完，会自动滚动-->
                <li><a href="#">二级导航名称</a></li>
            </ul>
        </li>
        <!--导航的一个栏目结束-->
    </ul>
</div>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！