jQuery：奇怪的行爲在我的菜單欄

我想用HTML，CSS和jQuery製作菜單欄。它工作，有點。當我將鼠標懸停在主菜單上時，出現子菜單。但是，如果我嘗試將鼠標移過第一個子菜單，它將消失。我會包括我的JsFiddle。下面是代碼：jQuery：奇怪的行爲在我的菜單欄

HTML：

  <ul id="menu"> 
      <li><a href="#">Categories 1</a> 
       <ul id="cat1"> 
        <li class="first"><a href="#">temp1</a></li> 
        <li><a href="#">temp2</a></li> 
        <li><a href="#">temp3</a></li> 
       </ul> 
      </li> 
     </ul>

CSS：

#menu { 
    background-color: #0000FF; 
    height: 20px; 
    padding: 15px 0 10px; 
    margin: 5px; 
    font: 12px Tahoma; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    box-shadow: inset 0px 0px 10px #000; 
    text-align: center; 
} 

#menu > li{ 
    display: inline; 
} 

li a { 
    color: #fff; 
    text-decoration: none; 
} 

.first{ 
    margin-top: 12px; 
} 

#cat1 > li{ 
    display: block; 
    width: 150px; height: auto; 
    margin-left: auto; margin-right: auto; 
} 

#cat1 > li > a{ 
    display:block; 
    background-color: #0000FF; 
    padding: 10px; 
    box-shadow: inset 0px 0px 2px #000; 
}

的jQuery：

$('#cat1 > li > a').hide(); 
$('#menu > li > a').mouseenter(function(){ 
    $('#cat1 > li > a').slideDown('slow').css({display: 'block'}); 
}); 

$('#cat1 > li > a').mouseleave(function(){ 
    $('#cat1 > li > a').slideUp('slow').css({display: 'block'}); 
});

http://jsfiddle.net/ZfN7t/19/

感謝您的幫助！

來源

2013-06-25 Nilzone-

它不能解決所有的問題，但是'#menu裏了'應該是'#menu>李> a'和'#menu li'應該是'#menu> li'。否則，這些選擇器也會匹配'＃cat1'中的元素。 – Barmar

@Barmar感謝您的幫助，但仍然，當我選擇第二個子菜單時，它會消失。我不明白爲什麼 –

就像我說的，它不能解決所有的問題。如果我有解決方案，我會發佈一個答案。 – Barmar

我加了一些CSS：

#menu > li { 
    display: inline-block; 
} 

#cat1 { 
    display:none; 
} 

#menu a:hover { 
    color: #dc692e; 
}

，簡化了使用Javascript：

$('#menu > li').hover(function(){ 
    $('#cat1').slideDown('slow'); 
},function(){ 
    $('#cat1').stop().slideUp('slow'); 
});

來源

2013-06-25 21:45:29 hmhcreative

jQuery：奇怪的行爲在我的菜單欄

回答

相關問題