1

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

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

<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）上？

4

4 回答 4

2

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

#menuIS an ul，则#menu ul ul表示

我的一个ul 后裔的ul 后裔#menuul

你没有三个级别的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;
}
于 2013-05-06T12:50:22.947 回答
1

问题在于您的选择器：

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

于 2013-05-06T12:28:05.307 回答
0

你必须改变很多东西才能使它工作，基本的想法是把子菜单放在你的菜单项中：

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/

于 2013-05-06T12:53:31.743 回答
0

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

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

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

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

于 2013-05-06T12:47:51.760 回答