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>

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

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)?

回答1:

First problem: your selectors are wrong.

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

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

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

change ul ul to 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.

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)

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

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

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

http://jsfiddle.net/V7Ltw/

回答3:

You might try adding the following to your 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.

回答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/

来源：https://stackoverflow.com/questions/16398730/hover-on-menu-dropdown-how-to-make-hover-effect-not-to-disappear

标签

html

css

css3