《xhtml》代码:
<ul id="master">
<li>第一个
<ul>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
</ul>
</li>
<li>第二个
<ul>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
</ul>
</li>
<li>第三个
<ul>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
</ul>
</li>
</ul>

《CSS》代码:
* {
margin:0;
padding:0;
}
body {
font-family:"微软雅黑";
}
#master {
list-style:none;
width:900px;
margin:0 auto;
}
#master>li {
float:left;
margin:0 20px;
cursor:pointer;}
#master>li ul {
list-style:none;
display:none; /*master的子元素li下的ul元素隐藏*/
}

《jquery》代码:
$(function() {
$("#master>li").mouseover(function() {
$(this).children("ul").slideDown("fast")
.end()
.siblings().children().slideUp("fast");
});
$("#master>li").mouseout(function() {
$(this).children("ul").hide();
})
})

这里效果图:http://52web.host-ed.net/nav/
我想问的是:如何让鼠标放到的第一级菜单上的时候又放到该菜单的第二级菜单的时候,第二级菜单不会消失?不好意思啊。我实在无法更清楚表达这意思。我不多说了。相信大家都明白我的意思。

解决方案 »

  1.   

    $(function() {
    var timeid = null;
    $("#master>li").hover(
    //鼠标滑入事件
    function(e){
    //鼠标移入,首先移除timeid防止子菜单一闪消失
    clearTimeout(timeid);
    //划出子菜单
    $(this).children("ul").slideDown("fast");
    //隐藏其他子菜单
    $(this).siblings().children().slideUp("fast");
    },
    //鼠标划出事件
    function(e){
    //0.5秒后子菜单消失,
    timeid=setTimeout(
    function(){
    $('#master>li').children("ul").hide();
    },
    500);
    }
    );
    $('#master>li>ul').hover(
    function(e){
    //从主菜单滑入相应子菜单时清除timeid,防止子菜单消失
    clearTimeout(timeid);
    //阻止浏览器默认冒泡行为
    //stopBubble(e);
    },
    function(e){
    $(this).slideUp("fast");
    //stopBubble(e);
    }
    );

    });
      

  2.   


    $(function() { //第一级菜单
    $("#master>li").mouseover(function() {
    $(this).children("ul").slideDown("fast")
    .end()
    .siblings().children().slideUp("fast");
    }).mouseout(function() {
    $(this).children("ul").hide();
    });
    $("#master>li>ul").mouseover(function() { //第二级菜单
    $(this).css("display","block");
    }).mouseout(function() {
    $(this).css("display","none");
    })
    })