只要用鼠標觸及子菜單就會立即消失

Question

我有一個菜單和一個子菜單。我通過結合來自stackoverflow和api.jQuery的一些答案，將它切換到了Jquery。但現在我真的陷入困境，我無法找到解決辦法。 每當我到達菜單，子菜單切換（好東西），但每當我達到子菜單鏈接它消失。

由於造型，它不能在小提琴中工作，這就是爲什麼我沒有把它放在那裏。

HTML

<ul id="menüü"> 
    <li class="menu"> 
     <p><a href="meist.html">Meist</a> 

     </p> 
     <ul class="submenu"> 
      <li class="asi1">Asi 1</li> 
      <li class="asi2">Asi 2</li> 
      <li class="asi3">Asi 3</li> 
     </ul> 
    </li> 
    <li class="menu"> 
     <p><a href="seadmed.html">Seadmed</a> 

     </p> 
     <ul class="submenu"> 
      <li class="item1">Item 1</li> 
      <li class="item2">Item 2</li> 
      <li class="item3">Item 3</li> 
     </ul> 
    </li> 
</ul> 
<div id="submenu"></div> 

CSS

.menu { 
    display: inline; 
    float:left; 
    width:180px; 
    height:50px; 
    color:#191919; 
    text-align:center; 
    background:#990000; 
    -moz-border-radius-top-left: 50px; 
    border-top-left-radius: 50px; 
    position:relative; 
} 
.submenu { 
    font-size:14px; 
    display:none; 
    position:absolute; 
    top:62px; 
    right:25%; 
    z-index:300 
} 
.submenu { 
    background-color:#cecece; 
} 
.submenu > li { 
    list-style-type:none; 
    background-color:#fff; 
    color:blue; 
    cursor:pointer; 
} 
#submenu { 
    color:white; 
    height:40px; 
    width:900px; 
    background:#630000; 
    margin-top:50px; 
    position:relative; 
} 

JS

$(document).ready(function() { 
    $("li.menu").mouseenter(function() { 
     $(this).find(".submenu").toggle(); 
    }); 
}); 

Answer 1

變化mouseenter到mouseover那麼當你懸停一個子元素時，它將不會關閉。並使用mouseover顯示和mouseout隱藏。

Example on jsFiddle

$(document).ready(function() 
{ 
    $(".menu").mouseover(function() 
    { 
     $(this).find(".submenu").show(); 
    }); 

    $(".menu").mouseout(function() 
    { 
     $(this).find(".submenu").hide(); 
    }); 
}); 

Answer 2

切換顯示和隱藏，所以第一次的mouseenter事件被觸發時，它會顯示與第二之間切換它隱藏的時間。您需要添加條件語句以確保在鼠標懸停時不會隱藏它。更好的方法是使用mouseenter來顯示，mouseout可以隱藏。

Answer 3

不是一個完美的例子，但這個純粹的css版本應該提供一個很好的基礎讓你開始？

http://jsfiddle.net/bNpnZ/2/

<ul class="menu"> 
    <li> <a href="meist.html">Meist</a> 

     <ul class="submenu"> 
      <li class="asi1">Asi 1</li> 
      <li class="asi2">Asi 2</li> 
      <li class="asi3">Asi 3</li> 
     </ul> 
    </li> 
    <li> <a href="seadmed.html">Seadmed</a> 

     <ul class="submenu"> 
      <li class="item1">Item 1</li> 
      <li class="item2">Item 2</li> 
      <li class="item3">Item 3</li> 
     </ul> 
    </li> 
</ul> 

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

.menu { 
    width:100%; 
    float:left; 
    background:#eee; 
} 
.menu > li { 
    float:left; 
    margin:0 0 0 10px; 
    position:relative; 
} 
.menu > li:first-child { 
    margin:0; 
} 
.menu > li > a { 
    padding:10px 20px; 
    float:left; 
    color:#666; 
} 
.submenu { 
    position:absolute; 
    top:-9999em; 
    left:0; 
    font-size:14px; 
    background-color:#ccc; 
} 
.menu > li:hover .submenu { 
    top:30px; 
} 

Answer 4

我有更新的jQuery並添加樣式.menu a，在側面不需要立也<p>。

jQuery的

$('.menu').hover(
function() { 
    $(this).children('.submenu').fadeIn('fast'); 
}, 
function() { 
    $(this).children('.submenu').fadeOut(); 
}); 

CSS

.menu a{ 
    display:block; 
    line-height:50px; 
} 
.submenu { 
    font-size:14px; 
    display:none; 
    position:absolute; 
    top:50px; 
    right:25%; 
    z-index:300 
} 

HTML

<ul id="menüü"> 
    <li class="menu"> 
     <a href="meist.html">Meist</a> 
     <ul class="submenu"> 
      <li class="asi1">Asi 1</li> 
      <li class="asi2">Asi 2</li> 
      <li class="asi3">Asi 3</li> 
     </ul> 
    </li> 
    <li class="menu"> 
     <a href="seadmed.html">Seadmed</a> 
     <ul class="submenu"> 
      <li class="item1">Item 1</li> 
      <li class="item2">Item 2</li> 
      <li class="item3">Item 3</li> 
     </ul> 
    </li> 
</ul> 

jsFiddle File