jquery下拉菜单

【Javascript】

下载

新闻

文章

纯css下拉菜单比较难兼容ie6.此jquery下拉菜单是比较常用的，兼容性也好。

<script type="text/javascript">
    $(function(){
        $(".menu_ul li").hover(function(){
            $(this).find(".sub_menu").show();
            $(this).addClass("over_menu");
        },function(){
            $(this).find(".sub_menu").hide();
            $(this).removeAttr("class");
        });
    })
</script>

<div id="menu_div">
    <div class="public_div">
        <ul class="menu_ul">
            <li><a href="#">保险首页</a></li>
            <li><a href="#">汽车保险</a></li>
            <li><a href="#">意外保险</a>
                <div class="sub_menu">
                    <a href="#">少儿意外险</a>
                    <a href="#">老年意外险</a>
                    <a href="#">交通意外险</a>
                    <a href="#">航空意外险</a>
                </div>
            </li>
            <li><a href="#">旅游保险</a>
                <div class="sub_menu">
                    <a href="#">境内旅游险</a>
                    <a href="#">境外旅游险</a>
                </div>
            </li>
            <li><a href="#">签证保险</a></li>
            <li><a href="#">财产保险</a>
                <div class="sub_menu">
                    <a href="#">家财保险</a>
                    <a href="#">企业财产险</a>
                    <a href="#">货物运输保险</a>
                </div>
            </li>
            <li><a href="#">其他保险</a></li>
        </ul>
    </div>
</div>

个人认为这种下拉菜单html结构是比较理想的。即li里套ul或div。最好是ul li ul li 无限循环，形成无限菜单形式。

效果点击这里查看！