下拉菜單，CSS，HTML和JavaScript：JavaScript製作菜單跳轉和功能不正確

Question

我有一個簡單的下拉菜單，但是當它使用不起作用時，我認爲JavaScript存在問題，因爲它只是不停地彈跳！

的jsfiddle這裏：http://jsfiddle.net/pJeDV/

<div class="container"> 
<ul id="coolMenu"> 
<li><a href="#">Lorem</a></li> 
<li><a href="#">Mauricii</a></li> 
<li> 
    <a href="#">Periher</a> 
    <ul> 
     <li><a href="#">Hellenico</a></li> 
     <li><a href="#">Genere</a></li> 
     <li><a href="#">Indulgentia</a></li> 
    </ul> 
</li> 
<li><a href="#">Tyrio</a></li> 
<li><a href="#">Quicumque</a></li> 
</ul> 

CSS

#coolMenu, 
#coolMenu ul { 
    list-style: none; 
} 
#coolMenu { 
    float: left; 
} 
#coolMenu > li { 
    float: left; 
} 
#coolMenu li a { 
display: block; 
    height: 2em; 
    line-height: 2em; 
    padding: 0 1.5em; 
    text-decoration: none; 
} 
#coolMenu ul { 
    position: absolute; 
    display: none; 
z-index: 999; 
} 
#coolMenu ul li a { 
    width: 80px; 
} 
#coolMenu li:hover ul { 
    display: block; 
} 

/* Main menu 
------------------------------------------*/ 
#coolMenu { 
    font-family: Arial; 
    font-size: 12px; 
    background: #2f8be8; 
} 
#coolMenu > li > a { 
    color: #fff; 
    font-weight: bold; 
} 
#coolMenu > li:hover > a { 
    background: #f09d28; 
    color: #000; 
} 

/* Submenu 
------------------------------------------*/ 
#coolMenu ul { 
    background: #f09d28; 
} 
#coolMenu ul li a { 
    color: #000; 
} 
#coolMenu ul li:hover a { 
    background: #ffc97c; 
} 

#coolMenu li:hover ul.noJS { 
    display: block; 
} 

的JavaScript

<script type="text/javascript"> 
$(function(){ 
    $('#coolMenu').find('> li').hover(function(){ 
     $(this).find('ul') 
     .removeClass('noJS') 
     .stop(true, true).slideToggle('fast'); 
    }); 
}); 
</script> 

http://jsfiddle.net/pJeDV/

Answer 1

這裏是工作提琴： http://jsfiddle.net/surendraVsingh/pJeDV/6/

jQuery的

$(function(){ 
    $('#coolMenu > li').hover(function(){ 
     $(this).find('ul').slideToggle(); 
    }); 
}); 

CSS（刪除如下代碼完全）

#coolMenu li:hover ul { 
    display:block; /* Remove This*/ 
} 

Answer 2

這是你在找什麼？而不是使用.find（'> li'）我用.children（'a'）。同樣在.hover（）函數中，您缺少鼠標移出功能。

jsFiddle

下面的代碼：

$(function(){ 
$('#coolMenu').children('a').hover(function(){ 
    $(this).find('ul') 
    .removeClass('noJS') 
    .slideToggle('fast'); 
},function(){ 
    $(this).find('ul') 
    .addClass('noJS') 
    .slideToggle('fast'); 
    }); 
});