Question

所以基本上我想让我的菜单在子菜单盘旋时保持悬停状态，我已经尝试了这个

但它仍然不会像我想要的那样改变，我哪里出错了？这是我的片段

#topmenu li li:hover a:hover{
  color: #000;
  text-decoration: none;
  background-color: #fff;
  text-shadow: 0 0 1px #000; 
}

的问候，

Answer 1

不确定为什么要隐藏包含left: -999em;而不是display: none;的子菜单。

以下是更新的jsFiddle：http://jsfiddle.net/JmkaM/1/，它使用display: none;和display: block;来显示子菜单。

当用户悬停顶级li时，您要执行的操作是显示子菜单。所以你会这样做li:hover ul。对于您的特定CSS，修改以下内容：

#topmenu li ul {
     /* left: -999em; remove */
     display: none;  /* add */
}

/* add the following */
#topmenu li:hover ul {
     display: block;
}

如果由于某种原因确实需要使用left，请执行以下操作：

#topmenu li:hover ul {
     left: 0;
}

它会使您的子菜单从向左推-999em。虽然它可能不会放在你想要的地方。

更新1

这将是我最后一次帮助你。你需要知道好的反馈会帮助别人帮助你。我知道你是新人，但回答的答案是“不做我想做的事”，无法帮助我们或你。

我只是根据您在评论中链接到的jsFiddle猜测您想要的内容。

这是新的jsFiddle：http://jsfiddle.net/JmkaM/2/

下面您将看到我之前和之后所做的更改。我只是为了简洁而突出显示了我改变的属性。

<强>之前

#topmenu ul { /* ... */ }
#topmenu li ul {
     padding-top: 0px;
     padding-bottom: 0px;
}
#topmenu li li:first-child {
     margin-top: 14px;
     border: 0;
}

<强> AFTER

/* added child selector '>' so only top level navigation
   items have a background of red */
#topmenu > ul { }
/* set padding on all sides to 0 */
#topmenu li ul {
     padding: 0;
}
/* removed whole rule - #topmenu li li:first-child */

更新2

试试这个：

#topmenu > ul > li:hover {
    background-color: white;
}
#topmenu > ul > li:hover > a {
    color: black;
}

Answer 2

看到这个小提琴： http://jsfiddle.net/mSNqT/46/

这会有所帮助。

在子菜单中悬停时菜单不会更改

2 个答案: