保持下拉菜單可見，即使我鼠標點擊菜單按鈕，因爲我仍然懸停在子菜單鏈接上

Question

我有一個navmenu，我用css和jquery來顯示或隱藏子菜單，我做的是當我mouseenter按鈕我slideDown持有子菜單中的鏈接和我使用slideUp時，我在navmanu中的鼠標按鈕，我無法弄清楚它，我如何停止slideUp行動，如果我hovring中的鏈接-menu並激活它，如果我的鼠標沒有懸停在子菜單中的任何鏈接？

#button { 
     border:2px solid #04076A; 
     margin-top:50px; 
     width:100px; 
     padding:5px; 
     text-align:center; 
     background-color:#5555FF; 
} 

#button:hover { 
       background-color:#2AAAFF; 
} 

#button a { 
      font-family:Arial; 
      text-decoration:none; 
      display:block; 
} 

#button a:hover { 
       color:#fff; 
} 

#DDMenu { 
     width:100px; 
     padding:5px; 
     border:2px solid #515248; 
     display:none; 
} 

ul { 
    margin:0px; 
    padding:0px; 
    list-style:none; 
} 

ul li { 
     margin:0px; 
     padding:0px; 
     background-color:#B8B8B0; 
     opacity:.1; 
} 

ul li a { 
     display:block; 
     text-align:center; 
     text-decoration:none; 
} 

ul li a:hover { 
     background-color:#DADAD6; 
} 

HTML：

<div id="button"> 
<a href="#">Button 1</a> 
</div> 

<div id="DDMenu"> 
<ul> 
<li><a href="#">link 1</a></li> 
<li><a href="#">link 2</a></li> 
<li><a href="#">link 3</a></li> 
<li><a href="#">link 4</a></li> 
</ul> 
</div> 

Jquery的一部分：

$(document).ready(function() { 

    $('#hide').click(function(){ 
    $('#contents').slideToggle(); 
    return false; // should return false to prevent page loading 
    }); 

    $('#button').mouseenter(function() { 
    $('#DDMenu').slideDown(); 
    }); 

    $('#button').mouseleave(function() { 
    $('#DDMenu').slideUp(); 
    }); 
}); 

任何想法，請？

Answer 1

一個可能的解決方案：

1）創建一個圍繞與子菜單項的按鈕，包裝DIV像

<div id="menu"> 
    // your code here 
</div> 

CSS：

#menu { 
    width: 100px 
} 

2）附加了slideDown /效果基本show事件到該div而不是按鈕

$('#menu').mouseenter(function() { 
    $('#DDMenu').slideDown(); 
}); 

$('#menu').mouseleave(function() { 
    $('#DDMenu').slideUp(); 
}); 

在此處測試：http://jsfiddle.net/KLYBJ/