html - Css 打印第二个 div

Question

如果您查看此网站 http://kids.nineplanets.org/在移动分辨率下，您会发现由于一些随机的 CSS 而没有显示菜单。

这是我遇到问题的结构

<div class="wrap">
<div id="mobile-menu-icon"></div>

<ul id="menu-main-menu" class="menu genesis-nav-menu menu-primary mobile-menu">
<li class="menu-item"><a href="portfoli.htm">The Sun</a></li>
<li class="menu-item"><a href="mercury.htm">Mercury</a></li>
<li class="menu-item"><a href="venus.htm">Venus</a></li>
<li class="menu-item"><a href="earth.htm">Earth</a></li>
<li class="menu-item"><a href="mars.htm">Mars</a></li>
<li class="menu-item"><a href="asteroid.htm">Asteroid Belt</a></li>
<li class="menu-item"><a href="jupiter.htm">Jupiter</a></li>
<li class="menu-item"><a href="saturn.htm">Saturn</a></li>
<li class="menu-item"><a href="uranus.htm">Uranus</a></li>
<li class="menu-item"><a href="neptune.htm">Neptune</a></li>
<li class="menu-item"><a href="pluto.htm">Pluto</a></li>
<li class="menu-item"><a href="fotomo.htm">Photos</a></li>
</ul>

</div>

这就是我试图解决问题的 css。

#mobile-menu-icon {
        cursor: pointer;
        display: block;
        padding: 20px 0;
        padding: 1.25rem 0;
        text-align: center;
    }



    #mobile-menu-icon:hover::before {
        color: #4bbdbd;
        content: 'MENU \2637';
    } 

    #mobile-menu-icon:active::before {
        color: #4bbdbd;
        content: 'MENU \2637';
    } 

    .crave-citrus #mobile-menu-icon::before {
        color: #ee506b;
        content: 'MENU \2630';
        font-weight: bold;
        letter-spacing: 1px;
    }

    .crave-citrus #mobile-menu-icon:hover::before {
        color: #ee506b;
        content: 'MENU \2637';
    } 

    .crave-citrus #mobile-menu-icon:active::before {
        color: #ee506b;
        content: 'MENU \2637';
    }

    .crave-berry #mobile-menu-icon::before {
        color: #896da7;
        content: 'MENU \2630';
        font-weight: bold;
        letter-spacing: 1px;
    } 

    .crave-berry #mobile-menu-icon:hover::before {
        color: #896da7;
        content: 'MENU \2637';
    }

    .crave-berry #mobile-menu-icon:active::before {
        color: #896da7;
        content: 'MENU \2637';
    }

我已经解决了包装器重叠的问题，但现在我看到的只有 2 个菜单。 下面的第二个是 css 打印的前选择器，我想去掉它，但是当我尝试使用上面的代码时，它总是 arase 和原始的!

Answer 1

在您的 mobile-menu.js 中有以下代码

$(".menu-primary").addClass("mobile-menu").before('<div id="mobile-menu-icon"></div>');

您需要删除上面的行。然后你的问题就会解决。由于这一行，两个菜单显示在您的移动 View 中。