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行。

更改导航栏悬停图标

1 个答案: