懸停在菜單下拉菜單 - 如何使懸停效果不消失？

Question

我的菜單和懸停效果有一些嚴重的問題。

我有一個非常基本的菜單，裏面有一個子菜單：

<ul id="menu"> 
<li><a href="#">Menu1</a></li> 
<li><a href="#">Menu2</a> 
    <ul> 
    <li><a href="#">SubMenu1</a></li> 
    <li><a href="#">SubMenu2</a></li> 
    </ul> 
</li> 
<li><a href="#">Menu3</a></li> 
</ul> 

這裏是我使用的CSS：

#menu li { 
display: inline; 
} 

#menu li a { 
padding: 10px; 
} 

#menu li a:hover { 
background: #000; 
} 

#menu ul ul { 
    display: none; 
} 
#menu ul li:hover > ul { 
    display: block; 
} 
#menu ul ul { 
    width: 200px; 
    height: 100px; 
    background: #000; 
} 

好了，所以我的問題是，當我將鼠標懸停我的鼠標的下拉菜單，並獲得我的鼠標在子菜單上，父菜單項（在這種情況下菜單2）的懸停效果正在消失。所以當我將鼠標懸停在子菜單項上時，它不會有黑色的BG。

有什麼我可以做，使懸停效果留在partent菜單（Menu2）？

Answer 1

第一個問題：您的選擇器是錯誤的。

#menu是ul，然後#menu ul ul意味着

的ul後裔的ul後裔我#menu的，這是一個ul

你不必三個層次ul s，所以...

變化ul ul變爲li ul。

的第二個問題是，你正在影響懸停a標籤，但標籤a你子菜單ul的兄弟，不是祖先（或父母）。

然後，您應該將您的目標設定爲li，而不是您的a。

演示：http://jsfiddle.net/mSrkn/（以噸的問題依然存在，但與上述兩種解決）

#menu li { 
display: inline; 
} 

#menu li a { 
padding: 10px; 
} 

#menu li:hover { 
background: #000; 
} 

#menu li ul { 
    display: none; 
} 
#menu li:hover > ul { 
    display: block; 
} 
#menu li ul { 
    width: 200px; 
    height: 100px; 
    background: #000; 
} 

Answer 2

問題是與YOUT選擇：

#menu ul li:hover > ul { 
    display: block; 
} 

這表示與ID具有與一個與孩子UL徘徊LIS孩子UL的任何元素，應選擇。您的標記是與此不同，在UL本身就是ID #menu所以你必須從自己的選擇中刪除第一UL：

#menu li:hover > ul { 
    display: block; 
} 

http://jsfiddle.net/V7Ltw/

Answer 3

你可以嘗試添加以下你的CSS

#menu li:hover{ 
    background-color: #000; 
} 

通過將鼠標懸停在子菜單上，您仍然將鼠標懸停在父列表項上。

而且你應該按照凱爾的回答以及你需要從你的CSS中刪除第一個UL選擇器。

Answer 4

你必須改變很多東西，使這項工作，其基本思想是把你的菜單項中的子菜單：

CSS：

#menu li { 
display: inline; 
} 

#menu li a { 
padding: 10px; 
} 

#menu li a:hover { 
background: #000; 
} 

#menu ul.submenu { 
    display: none; 
    float: left; // For viewing purpose 
} 

#menu ul.submenu { padding: 20px; } 

#menu ul.submenu:hover { 
    display: block; 
} 

#menu li:hover > ul.submenu { 
    display: block; 
} 

ul.submenu:hover + a { background: #000; } 

#menu ul { 
    width: 500px; 
    height: 100px; 
    background: #000; 
} 

HTML：

<ul id="menu"> 
<li><a href="#">Menu1</a></li> 
<li> 
    <ul class='submenu'> 
    <li><a href="#">SubMenu1</a></li> 
    <li><a href="#">SubMenu2</a></li> 
    </ul> 
    <a href="#">Menu2</a> 
</li> 
<li><a href="#">Menu3</a></li> 
</ul> 

演示在這裏：http://jsfiddle.net/V7Ltw/