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

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

我有什么办法可以让悬停效果停留在部分菜单（Menu2）上吗？

Answer 1

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

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

我ul的{{1}} 后代的ul 后代，即#menu

您没有ul个三级，所以......

将ul更改为ul ul。

第二个问题是您在悬停时影响li ul代码，但a代码是兄弟，而不是祖先（或您的子菜单a的父级。

然后，您应该定位ul，而不是li。

演示：http://jsfiddle.net/mSrkn/（仍存在大量问题，但上述两项问题已得到解决）

Answer 2

问题出在yout选择器上：

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

这表示应该选择任何ID为具有子l的元素，其中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/

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

4 个答案: