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

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>

Here is the CSS I'm using:

这是我正在使用的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;
}

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.

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

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

有什么我可以做的,使悬停效果保持在partent菜单(Menu2)?

4 个解决方案

#1

First problem: your selectors are wrong.

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

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

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

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

我的#menu的ul后代的ul后代,这是一个ul

You don't have three levels of uls, so...

你没有三级uls,所以......

change ul ul to li ul.

将ul ul改为li 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.

第二个问题是您在悬停时影响标记,但标记是兄弟,而不是子菜单ul的祖先(或父级)。

You should then target your li, not your a.

你应该定位你的李,而不是你的。

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

演示: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

The problem is with yout selectors:

问题出在yout选择器上:

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

This says that any element with ID that has a child ul with lis that's hovered with a child ul should be selected. Your markup is different from this, the UL itself is the ID #menu so you have to remove the first ul from the selectors themselves:

这表示任何具有ID的子元素都应该被选中,该子元素具有与子ul一起悬停的lis。您的标记与此不同,UL本身就是ID #menu,因此您必须从选择器本身中删除第一个ul:

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

http://jsfiddle.net/V7Ltw/

#3

You might try adding the following to your CSS

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

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

By hovering over the sub-menu, you're still hovering over the parent list item.

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

And you should follow Kyle's answer as well as you do need to remove the first UL selector from your css.

你应该按照凯尔的答案,你需要从你的CSS中删除第一个UL选择器。

#4

You have to change a lot of stuff to make this work, the basic idea is to put the submenu inside your menu items :

你必须改变很多东西来完成这项工作,基本的想法是将子菜单放在你的菜单项中:

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>

Demo here : http://jsfiddle.net/V7Ltw/

演示:http://jsfiddle.net/V7Ltw/

#1