css - 悬停在子菜单中时菜单不会改变

Question

所以基本上我想让我的菜单在他们的子菜单悬停时保持悬停状态，我已经尝试过这样

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

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

问候，

Answer 1

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

这会很有帮助。

Answer 2

不知道为什么你用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;
}

后

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