悬停在菜单下拉菜单 - 如何使悬停效果不消失？

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/