更改导航栏悬停图标

Question

目前我有一个代码示例，它的功能是，如果导航栏上的链接有子选项，则在链接旁边有一个小的"+"号。当用户将鼠标悬停在链接上时，它将变为"-"，并在下拉列表中显示子选项。我想做的是把它改成一种黄色的"v"形（无论用户是否悬停都保持静止），但我不知道该怎么做

我的代码示例很长，我知道这与CSS的a:before和a:after部分有关，但我不确定我到底需要更改什么。如有任何帮助，我们将不胜感激。

http://pastie.org/private/tsuwnney7kiibhiuaambjq

Answer 1

您看到的看起来像+或-的东西实际上是两条细线的视觉技巧，一条垂直于水平，叠加在一起，编码如下：

#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

要修复它，你需要做这样的事情：

#cssmenu > ul > li.has-sub > a:after {
   /*you don't need this style anymore */
}
#cssmenu > ul > li.has-sub > a:before {
      position: absolute;
      top: 19px;
      right: 14px;
      display: block;
      width: 16px;
      height: 16px;
      background: url([your yellow triangle image icon path goes here]) no-repeat;
      content: '';
    }

您还需要删除您描述的动态行为，它看起来可能是示例代码中的第91行。