html - 找不到 Zurb Foundation 6 下拉列表的类 :after

Question

有谁知道我需要覆盖哪个类才能更改带有下拉选项的菜单项中向下箭头的颜色？

我到处都找不到它!

代码:

<li>
    <a href="#" class="active">About Us</a>
    <ul class="vertical menu nested">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
    </ul>
</li>

Answer 1

使用您的自定义类来更改箭头颜色，例如

^{注意:.your-class 在这里是一个虚拟类..你可以使用你自己的}

.your-class.dropdown.menu.vertical>li.opens-right>a::after {
  border-color: transparent transparent transparent red;
}

堆栈片段

$(document).foundation();

.your-class.dropdown.menu.vertical>li.opens-right>a::after {
  border-color: transparent transparent transparent red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" />
<ul class="your-class vertical dropdown menu" data-dropdown-menu="iet608-dropdown-menu" style="max-width: 250px;" role="menubar" data-is-click="false">
  <li role="menuitem" class="is-dropdown-submenu-parent opens-right" aria-haspopup="true" aria-label="Item 2" data-is-click="false">
    <a href="#Item-2">Item 2</a>
    <ul class="vertical menu nested submenu is-dropdown-submenu first-sub" data-submenu="" role="menu" style="">
      <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="#Item-2A">Item 2A</a></li>
      <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="#Item-2B">Item 2B</a></li>
    </ul>
  </li>
  <li role="menuitem"><a href="#Item-3">Item 3</a></li>
  <li role="menuitem"><a href="#Item-4">Item 4</a></li>
</ul>