Question

所以我正在摆弄我在http://cssmenumaker.com/menu/responsive-flat-menu上找到的这种设计，但是当导航栏在浏览器中缩小时，我遇到了一些问题。所以浏览器的全宽度看起来像img 1下面....当缩小它变成一个带有下拉菜单的汉堡包菜单，如img 2所示。问题是它重复，因为我添加了额外的li标签添加'超棒级菜单'。所以，我的问题是如何在img 2中删除那些额外的重复（它应该像img 1一样保留全宽）。

我尝试了一些简单的删除类，但它们没有用。我确信它非常简单，我只是没有看到它。

我把代码放在这里（因为无论出于何种原因，在这里缩进jquery是一件巨大的痛苦） http://codepen.io/anon/pen/NxZLKo

<body>
<div id="wrapper">
    <header>
        <nav>     
            <div id='cssmenu'>
                <ul>
                   <li><a href='#' class="current">Super Awesome Menu</a></li>
                    <li><a href='#'>Home</a></li>
                    <li class='active'><a href='#'>About</a></li>
                    <li><a href='#'>Activities</a></li>
                    <li><a href='#'>Resources</a></li>
                    <li><a href='#'>Contact</a></li>
                    <li><a href='#'>Join</a></li>
                </ul>
            </div> <!--end cssmenu-->
        </nav> <!--end nav-->
    </header> <!--end header-->
</div> <!--end wrapper-->

Answer 1

您可以使用媒体查询执行此操作。把这行代码放在你的CSS中你就可以了。

@media screen and (max-width: 926px) { #cssmenu ul.open li:nth-child(1){ display:none !important; } }

如果你li:nth-child(2)它会隐藏Home等，它会隐藏第一个孩子在这种情况下超级超级棒。

Answer 2

我认为没有额外的链接＆＃34; Super Awesome Menu＆＃34;

它只是您在第5行和第5行配置菜单的名称。你的代码片段的Javascript部分中的73。它是您的title参数

$("#cssmenu").menumaker({
   title: "Super Awesome Menu",  
   format: "multitoggle"  
});

让它空着或找到另一个名字！

Answer 3

试试这个css

@media screen and（max-width：680px）{#cssmenu ul.open 李：首先，孩子{ 显示：无！重要; }}

导航栏多选

3 个答案: