调试易

如同CSDN的头像名片弹出层。我遇到的问题是，当鼠标移动到层B上时，A层也触发鼠标离开事件，所以层B被隐藏了。鼠标放不上去

<script src="../js/jquery-1.3.2.min.js" language="javascript"></script>
<style>
#top1{
display:none;
border:1px solid #eee;
width:120px;
}
#bot1{
display:none;
width:150;
margin-left:120px;
border:1px solid #eee;
}
</style>
<span id="top">排&nbsp;&nbsp;&nbsp;&nbsp;名</span>&nbsp;&nbsp;&nbsp;&nbsp
<span id="bot">电&nbsp;&nbsp;&nbsp;&nbsp;影</span>
<div class="top1" id="top1">
<ul style="width=300px;">
<li><a href="http://www.baidu.com">第一</a></li>
<li><a href="http://www.google.com.hk">第二</a></li>
<li><a href="http://mail.xueersi.com">第三</a></li>
<li><a href="http://mail.163.com">第四</a></li>
</ul>
</div>
<div class="bot1" id="bot1">
<ul>
<li><a href="http://www.chinaphp.com">变形金刚</a></li>
<li><a href="http://www.sina.com.cn">哈利波特</a></li>
<li><a href="http://test.cakephp.com/articles/">武侠</a></li>
<li><a href="http://acls.com">六侠</a></li>
</ul>
</div><script type="text/javascript">
var intervaltime;
$('#top').mouseover(function(){
//为了鼠标可以在隐藏域里可以停留点击
clearTimeout(intervaltime);
$(".top1").show();
$(".bot1").hide();
}).mouseleave(function(){
//设置过期时间
intervaltime = setTimeout(function(){$(".top1").hide()},300);
}); $('.top1').mouseover(function(){
//清除过期时间
clearTimeout(intervaltime);
}).mouseleave(function(){
intervaltime = setTimeout(function(){$(".top1").hide();},300);
}); $("#bot").mouseover(function(){
clearTimeout(intervaltime);
$(".bot1").show();
$(".top1").hide();
}).mouseleave(function(){
intervaltime=setTimeout(function(){$(".bot1").hide();},300);
});
$('.bot1').mouseover(function(){
clearTimeout(intervaltime);
}).mouseleave(function(){
intervaltime = setTimeout(function(){$(".bot1").hide();},300);
});
</script>
这是个例子...应该是你想要的结果

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript"> 
 var G = function (id){ return document.getElementById(id); }
 var C = function (tag){ return document.createElement(tag); }
 window.onload = function() {
    var menu = function ()
    {
        this.menu = G('menu');
        this.menu.innerHTML = '';
        this.add = function (t_arr, c_arr)
        {
            var li;
            li = C('li');
            li.a = C('a');
            li.a.href = t_arr.url;
            li.a.innerHTML = t_arr.text;
            li.ul = C('ul');
            li.onmouseover = function () { li.ul.style.display = 'block'; }
            li.onmouseout = function () { li.ul.style.display = 'none'; }
            for (key in c_arr)
            {
                var t = C('li');
                t.a = C('a');
                t.a.href = c_arr[key].url;
                t.a.innerHTML = c_arr[key].text;
                t.appendChild(t.a);
                li.ul.appendChild(t);
            }
            li.appendChild(li.a);
            li.appendChild(li.ul);
            this.menu.appendChild(li);
        }
    }
    var ogject = new menu();
    ogject.add({'text':'菜单1','url':'#'},[{'text':'菜单A','url':'#'},{'text':'菜单B','url':'#'}]);
    ogject.add({'text':'菜单2','url':'#'},[{'text':'菜单C','url':'#'},{'text':'菜单D','url':'#'}]);    }; 
  </script> 
<style type="text/css"> 
 #menu ul { 
     display:none; 
 } 
</style> 
  
<ul id="menu"></ul> 

Thank You Very Match!!!!!!!!!!!!!!!!!!!

Thank You Very Much!!!!!!!!!!!!!!!!!!!