CSS菜单三角形不起作用答案

【问题标题】：CSS menu triangle not workingCSS菜单三角形不起作用
【发布时间】：2013-03-08 01:23:27
【问题描述】：

我需要一些 CSS 帮助。有两件事我想实现，但到目前为止我还没有成功。网站链接：http://hn.k12.oh.us/testsite/district/

当我将鼠标悬停在水平菜单（主菜单）项目上时，我希望出现一个三角形。我已经在垂直菜单中实现了这一点，但无法让它显示在水平菜单中。我希望它类似于垂直菜单的情况。

我正在使用以下代码。

#primary-menu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f7df2b;
  margin-left: -10px;
}

我希望三角形显示在当前活动的菜单项上。我无法让它对水平或垂直菜单起作用。

我已经用下面的 css 尝试了上面的内容：

#primary-menu > ul > li.active a {

【问题讨论】：

标签： css css-selectors

【解决方案1】：

#primary-menu > ul > li:hover:after {

应该是

#primary-menu ul > li:hover:after,
#primary-menu ul > li.current_page_item:after { ...

或

#primary-menu-menu > ul > li:hover:after,
#primary-menu-menu > ul > li.current_page_item:after { ...

您错误地指定了父/子关系。

【讨论】：

谢谢！我正试图弄清楚为什么您的回复从未出现在我的电子邮件收件箱中。
如何让三角形出现在活动链接中？
current_page_item：在水平菜单工作正常之后。垂直菜单有问题。我不确定我是否喜欢活动菜单的三角形外观，所以我想我会放弃它。感谢您的所有帮助！
不客气。我想了解活动元素的情况。如果你弄明白了，请分享。