Question

我正在尝试删除显示有下拉列表的箭头。

我发现了这个：

.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.5);
border-left-style: solid;
margin-right: 15px;
margin-top: -4.5px;
position: absolute;
top: 50%;
right: 0; }

我已将其替换为：

.top-bar ul > li.has-dropdown a:after { 
  content: "";
  display: none;
  width: 0;
  height: 0;
  border:0;
  border-color: none;
  border-left-style: none;
  margin-right: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
  right: 0;
}

然而，在“关于我们”之后还有空间。有任何想法如何删除它？

enter image description here

这是一些HTML：

<section class="top-bar-section">
    <ul  class="right">
        <li><a href="#">Link #1</a></li>
        <li><a href="#">Link #2</a></li>
        <li><a href="#">Link #3</a></li>
        <li><a href="#">Link #4</a></li>
        <li><a href="#">Link #5</a></li>
        <li class="has-dropdown">
            <a href="#">About us</a>
            <ul class="dropdown">
                 <li><a class="first-el" href="#">About the company</a></li>
                 <li><a href="#">Jobs</a></li>
                 <li><a href="#">Blog</a></li>
                 <li><a href="#">ToS</a></li>
                 <li><a class="last-el" href="#">Privacy</a></li>
            </ul>
        </li>
    </ul>
</section>

Answer 1

如果您正在使用Foundation 4（使用sass，这是非常推荐的），您可以通过更改_settings.scss中的设置来删除箭头。就是这个：

$topbar-arrows: true; //Set false to remove the triangle icon from the menu item

不幸的是，这也删除了子级别的箭头......

Answer 2

Argh终于在一小时后想出来了

.top-bar-section .has-dropdown > a:after {
   border-color: transparent transparent transparent;
}

这会使箭头消失。

Answer 3

查看CSS中的has-dropdown类。

它似乎有一些额外的填充以允许添加箭头。

Answer 4

如果你只用css攻击它，这将删除右边的箭头和填充。

.top-bar-section .has-dropdown＆gt; a {padding-right：15px！important;} .top-bar-section .has-dropdown＆gt; a：在{border-color：透明透明透明;}

之后

Answer 5

删除它：

.top-bar-section .has-dropdown > a:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 5px;
      border-color: transparent transparent transparent;    
      border-left-style: solid;
      margin-right: 15px;
      margin-top: -4.5px;
      position: absolute;
      top: 50%;
      right: 0; }

但要保留移动导航

@media only screen and (max-width: 40em) {

.top-bar-section .has-dropdown > a:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 5px;
      border-color: #dddddd transparent transparent transparent;    
      border-left-style: solid;
      margin-right: 15px;
      margin-top: -4.5px;
      position: absolute;
      top: 50%;
      right: 0; }

}

Answer 6

我们可以编辑类似插入符号的图标，它实际上是一个边框：

.has-dropdown > a:after {border-top-color: red !important;}

Answer 7

对我来说，我只是设置display：none; to whole :: after element，然后只调整padding

.top-bar-section .has-dropdown > a::after {
    display: none;
}
.top-bar-section .has-dropdown>a {
    padding-right:0.9375rem !important
}

Answer 8

您可以设置display none，或者只是将边框设置为0px。要么你会这样做。

.top-bar-section > li> a:after {
    display: none;
}

或

.top-bar-section > li> a:after {
    border: 0px;
}

然后作为Alex said，您需要更改菜单元素的填充，但这是可选的。

从foundation.css中删除.has-dropdown箭头

8 个答案: