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

【问题标题】：Hover on Menu dropdown - How to make Hover effect not to disappear?悬停在菜单下拉菜单上 - 如何使悬停效果不消失？
【发布时间】：2013-05-06 12:25:18
【问题描述】：

我的菜单及其悬停效果存在严重问题。

我有一个非常基本的菜单，其中有一个子菜单：

<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;
}

好的，所以我的问题是，当我将鼠标悬停在下拉菜单上并将鼠标放在子菜单上时，父菜单项（在本例中为 Menu2）的悬停效果正在消失。所以当我将鼠标悬停在子菜单项上时，它不会有黑色的BG。

我可以做些什么来让悬停效果留在子菜单 (Menu2) 上？

【问题讨论】：

标签： html css

【解决方案1】：

第一个问题：您的选择器错误。

#menu 是 ul ，然后 #menu ul ul 表示

我的#menu 的ul 后代的ul 后代，即ul

你没有uls 的三个级别，所以...

将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;
}

【讨论】：

【解决方案2】：

问题出在你的选择器上：

#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/

【讨论】：

嗯，谢谢你的回答，但它似乎并没有解决我的问题。我已经尝试过，一切都保持不变:(
#menu ul li > ul:hover 也试试

【解决方案3】：

您可以尝试将以下内容添加到您的 CSS 中

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

通过将鼠标悬停在子菜单上，您仍将鼠标悬停在父列表项上。

您应该遵循 Kyle 的回答，并且确实需要从您的 css 中删除第一个 UL 选择器。

【讨论】：

【解决方案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/

【讨论】：