CSS移动菜单设计

Question

我正在 Wordpress 中设计我的页面移动友好菜单。我希望可扩展的子菜单旁边有 +。我正在尝试使用 content 在其旁边添加 + 并使用填充在中间 float ，但我的问题是我在菜单上的所有内容旁边都添加了 +。

PHP:

       <div class="store-menu">
            <div class="store-wrapper">
                <nav id="site-navigation" class="main-navigation" role="navigation">
                    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( '', 'eightstore-lite' ); ?></button>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
                </nav><!-- #site-navigation -->
                <div class="clear"></div>
            </div>
        </div>

CSS:

 @media screen and (max-width: 990px) {
   .sub-menu {display: none !important;}

   .menu li a::after{
     content:'+' !important;
     color:'white' !important;
     float:middle !important;
     font-size:14px !important;
     padding-left: 10px !important;

   }
}

这就是我想要的

Answer 1

嘿，所以您要遇到的第一个小问题是没有 float 中间属性。你可以为此使用 flexbox，或者只是一个简单的 text-align: center

我猜您的另一个问题是您只希望“+”图标显示在有子项的菜单项上？

在这种情况下，您需要做的是利用 Wordpress 添加到菜单的“menu-item-has-children”类。像这样的东西:

   .menu li.menu-item-has-children a::after{
     content:'+' !important;
     color:'white' !important;
     text-align: center;
     font-size:14px !important;
     padding-left: 10px !important;
   }

还有一点要指出的是滥用 !important 属性。您将需要研究 css 特异性 CSS Tricks - css specificity