Question

我正在尝试向带有孩子的菜单项添加向下箭头。它应出现在此网站上的Our Story导航项目中：http://www.estiponagroup.com/

如果我检查它在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>

Answer 1

您可能需要使用它来获取它想要的地方，但它会填充您的想法。您需要在<a>元素和::after中添加一些元素。 padding: 21px 14px;的{{1}}和锚::after似乎是一个好的开始。

在Wordpress中使用子项向菜单项添加箭头

1 个答案: