在Wordpress中將箭頭添加到帶有子項的菜單項

我正嘗試向小菜單項添加向下箭頭。它應該出現在本網站的我們的故事導航項上：http://www.estiponagroup.com/在Wordpress中將箭頭添加到帶有子項的菜單項

如果我檢查它在CSS中顯示的元素，但它不顯示在菜單中。我能做些什麼才能讓它顯示出來？

CSS：

.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li.menu-item-has-children > a::after { 
    color: #ccc; 
    content: '\25BC'; /*Down arrow*/ 
}

HTML：

<header class="main-header menu-type-standard-menu"> 
    <div class="container">  
     <div class="menu-column"> 
      <div class="standard-menu-container menu-skin-main reveal-from-top"> 
       <nav> 
        <ul class="menu" id="menu-main-nav-1"> 
         <!-- Other Menu Items are Here --> 
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-649"><a href="http://www.estiponagroup.com/our-story/" data-slimstat-tracking="false" data-slimstat-callback="true" data-slimstat-type="2">Our Story</a> 
          <ul class="sub-menu"> 
           <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1593"><a href="http://www.estiponagroup.com/virtual-office-vs-traditional-office/" data-slimstat-tracking="false" data-slimstat-callback="true" data-slimstat-type="2">Virtual vs Traditional</a></li> 
          </ul> 
         </li> 
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-650"><a href="http://www.estiponagroup.com/news/" data-slimstat-tracking="false" data-slimstat-callback="true" data-slimstat-type="2">News</a></li> 
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-651"><a href="http://www.estiponagroup.com/our-fans/" data-slimstat-tracking="false" data-slimstat-callback="true" data-slimstat-type="2">Fans</a></li> 
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-652"><a href="http://www.estiponagroup.com/contact/" data-slimstat-tracking="false" data-slimstat-callback="true" data-slimstat-type="2">Contact Us</a></li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </div> 
</header>

來源

2015-11-20 MattM

您可能需要發揮它得到它，你想要的，但它的填充後。您需要添加一些到<a>元素以及::after。 padding: 21px 14px;爲::after和padding: 0 33px;作爲錨點似乎是一個好的開始。

來源

2015-11-20 03:24:27 jmargolisvt

現在的問題是，它是從左到右的樣式。這意味着我必須將填充設置爲：padding：20px 12px 20px 93px！important; 箭頭顯示在此菜單項的右側，基於93px。如果我將另一個子菜單添加到較短或較長的父導航項中，它不會始終顯示在文本的右側。我希望箭頭出現在菜單項後面，始終保持相同的距離。我怎樣才能確保它總是對齊而不是左邊？ – MattM

任何它需要成爲':: after'元素的原因？將它作爲一個普通的角色添加並讓它更易於設計，你可能會更好。 – jmargolisvt

在Wordpress中將箭頭添加到帶有子項的菜單項

回答

相關問題