0

我在导航栏中添加了很棒的字体图标，并使用 css 对其进行了样式设置。除了带有下拉列表的链接外，一切都很好——一旦点击——它会显示两个图标，而不是只显示一个（见截图）。一个放置正确，另一个显示在“链接”一词下方和下拉菜单上方。

在此处输入图像描述

这是html代码：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>

这里是css代码：

ul li a:before {
    font-family: "FontAwesome";
    content: "\f067";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    text-align: center;
    color: #FFF;
    width: 100%;
    height: 100%;
    margin-top: -26px;  
}

如果有人能告诉我如何去掉下拉菜单下的图标（=白色十字），我将不胜感激。

在此先感谢您的帮助。

4

2 回答 2

0

问题是您的 CSS 正在以您想要的方式应用。您的嵌入式 UL 也会触发您的 CSS 规则。您可能会出现更多的白色十字架，但您看不到它们，因为您的背景是白色的。您应该将一个类应用于您想要拥有白色十字架的链接，然后仅将 css 规则应用于该类。

于 2014-08-12T16:21:46.880 回答
0

我认为您看到额外的 + 图标是因为您的 css 选择器不正确。实际上，您可能会获得 5 个额外的 + 图标（<a>下拉菜单中每个图标 1 个）。

要解决这个问题，您只需要定位<a>导航栏下的 ' 而<ul>不是下拉菜单<ul>

试试这个选择器：ul > li > a:before

编辑

我已经在下面分叉并更正了你的 bootply：

http://www.bootply.com/OSTDVMekNE

问题出在您的 css 的第 52 行（在 bootply 中）

.cross a:before, .cross:hover > a:before {

本来应该

.cross > a:before, .cross:hover > a:before {
于 2014-08-12T16:22:13.417 回答