4

ドロップダウンがあることを示す矢印を削除しようとしています。

私はこれを見つけました：

.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;
}

しかし、「私たちについて」の後にスペースがあります。それを削除する方法はありますか？

ここに画像の説明を入力

ここにいくつかの 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>
4

8 に答える 8

11

Foundation 4 (非常に推奨される sass を使用) を使用している場合は、 の設定を変更して矢印を削除できます_settings.scss。それはこれです：

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

残念ながら、これによりサブレベルの矢印も削除されます...

于 2013-10-17T07:08:33.117 に答える
7

Arghは1時間後にようやくこれを理解しました

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

これで矢印が消えます。

于 2013-10-20T15:26:41.543 に答える
1

それを削除するには：

.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; }

}
于 2014-06-07T11:40:55.423 に答える
1

cssだけでハッキングしている場合、これにより矢印と右側のパディングが削除されます。

.top-bar-section .has-dropdown > a {padding-right: 15px !important;} .top-bar-section .has-dropdown > a:after {border-color: transparent transparent transparent;}

于 2014-05-10T04:26:16.827 に答える
0

実際には境界線であるキャレットのようなアイコンを編集できます。

.has-dropdown > a:after {border-top-color: red !important;}
于 2014-05-31T08:31:14.940 に答える
0

私にとっては、display: none; を設定しただけです。全体に ::after 要素、次に調整されたパディング

.top-bar-section .has-dropdown > a::after {
    display: none;
}
.top-bar-section .has-dropdown>a {
    padding-right:0.9375rem !important
}
于 2015-03-19T23:46:03.373 に答える