Question

我需要一些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 {

Answer 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 { ...

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

CSS菜单三角形不起作用

1 个答案: