使用定时器显示下拉菜单



 html布局：

首排导航和下拉的内容分成两个div写。

 <div class="nav">
            <ul class="menu">
                <li>
                    <a href="index.html" style="background: #d31017;">首页</a>
                </li>
                <li>
                    <a href="online.html">网上服务</a>
                </li>
                <li>
                    <a href="product.html">产品服务</a>
                </li>
                <li>
                    <a href="business.html">业务联系</a>
                </li>
                <li>
                    <a href="custom.html">客户反馈</a>
                </li>
                <li>
                    <a href="aboutus1.html">关于我们</a>
                </li>
                <li>
                    <a href="destin.html">实用网址</a>
                </li>
                <li>
                    <a href="rencai.html">人才加盟</a>
                </li>
            </ul>                      
        </div>

下拉内容：

<!--首页下拉-->

<div class="slide_nav"></div>

<!-- 网上服务下拉-->
        <div class="slide_nav">
            <ul class="smenu">
                <li>
                    <a href="#" style="font-size:16px; color:#0a4e8f; font-weight:bold;">
                        <img src="images/slide_nav.jpg" />网上服务</a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/slide_nav2.jpg" />订舱查阅</a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/slide_nav2.jpg" />GPS动态</a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/slide_nav2.jpg" />仓储服务</a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/slide_nav2.jpg" />船公司服务</a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/slide_nav2.jpg" />阳光积分</a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/slide_nav2.jpg" />单据下载</a>
                </li>                
            </ul>
            <div class="clear"></div>
        </div>

....

....(等等下拉内容)

js内容：

$(document).ready(function () {

var timer22 = null;
    var i22;
    $(".menu li").hover(function () {
            var i22 = $(this).index();
            var j = $(".menu li").length;
            $(this).addClass("nav_ul_li_current").siblings("li").removeClass("nav_ul_li_current");
            if (i22 != 0 && i22 != 3 && i22 != 4 && i22 != 7) {
                clearTimeout(timer22);
                timer22 = setTimeout(function () {

                    $(".slide_nav").eq(i22).slideDown().siblings(".slide_nav").hide();
                }, 30)
            } else {
                $(".slide_nav").hide();
            }
        },
        function () {

            $(".menu li").removeClass("nav_ul_li_current");
            timer22 = setTimeout(function () {
                $('.slide_nav').hide();
            }, 200)

        });

    $(".slide_nav").hover(function () {
        clearTimeout(timer22);
        $(".menu li").eq(i22).addClass("nav_ul_li_current").siblings("li").removeClass("nav_ul_li_current");
    }, function () {
        clearTimeout(timer22);
        timer22 = setTimeout(function () {
            $(this).hide();
            $(".slide_nav").hide();
            $(".menu li").removeClass("nav_ul_li_current");
        }, 200)

    });

});

效果：