在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中将箭头添加到带有子项的菜单项

回答

相关问题