悬停在菜单下拉列表 - 如何使悬停效果不消失？ [英] Hover on Menu dropdown - How to make Hover effect not to disappear?

问题描述

我有一些严重的问题，我的菜单和它的悬停效果。

I have some serious problem with my menu and its hover effect.

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

I have a very basic menu, which has a submenu:

<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：

Here is the CSS I'm using:

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

Okay, so my problem is, that when I hover my mouse the Dropdown menu and gets my mouse on the Submenus, the Hover effect of the Parent menu item (in this case Menu2) is disappearing. So it will not have black BG when I hover the mouse on the submenu items.

有什么我可以做的悬停效果留在副菜单）？

Is there anything I could do to make that hover effect stay on the partent menu (Menu2)?

推荐答案

第一个问题：

#menu IS a ul c $ c> #menu ul ul 表示

#menu IS an ul , then #menu ul ul means

一个 ul #menu 的<$ c> 子孙 c>，即 ul

an ul descendant of an ul descendant of my #menu, that is an ul

ul ，

更改 ul ul 到 li ul 。

第二个问题是你正在影响 / code>标记，但 a 标记是兄弟，而不是祖先 ）您的子菜单 ul 。

The second problem is that you are affecting a tag on hover, but a tag is a sibling, not an ancestor (or parent) of your submenu ul.

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

You should then target your li, not your a.

演示： http： //jsfiddle.net/mSrkn/ （还有很多问题仍然存在，但上面两个问题已解决）

Demo: http://jsfiddle.net/mSrkn/ (with tons of problems still there, but with the two above resolved)

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

这篇关于悬停在菜单下拉列表 - 如何使悬停效果不消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！