html - 如何使用 Foundation 移动和替换下拉菜单中的箭头？

Question

出现默认下拉菜单项时，右侧有一个默认箭头。我希望我的自定义箭头(图像)出现在底部。为此，我需要修改 CSS 的哪一部分？

Answer 1

如果您在 Foundation 中使用经典的顶部栏导航，您应该具有以下 css。只需替换 position: absolute; 并调整您的边距。

.top-bar-section .has-dropdown > a::after {
   content: "";
   display: block;
   width: 0;
   height: 0;
   border: inset 5px;
   border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
   border-top-style: solid;
   margin-top: -2.5px; /* Adjust to your need */
   top: 22.5px; /* Remove it */
   margin-right: 15px; /* Adjust to your need */
   position: absolute; /* Remove it */
   right: 0; /* Remove it */
}