私はサブメニューリンク上にまだホバリングしているので、私はメニューボタンをマウスで押さえてもドロップダウンメニューを表示し続ける。

Question

私はnavmenuを持っていて、サブメニューを表示したり隠したりするのに使っている。 mouseout the button i slideDownサブメニューのリンクを保持しているulを使用しています。私はmouseoutのボタンをmouseoutで使用していますが、私はそれを把握できません。どうすればslideUpアクションを停止できますか？私のマウスがサブメニューの任意のリンクにマウスを乗せていない場合は、それを有効にしますか？

#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 id="menu"> 
    // your code here 
</div> 

CSSのようなサブメニュー項目とボタンの周りのラッパーのdivを作成します。

#menu { 
    width: 100px 
} 

2）slideDown/slideUpイベントを添付ボタンの代わりにそのdivに移動する

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

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

ここでテストしてください：http://jsfiddle.net/KLYBJ/