使用 CSS 在响应式导航菜单中隐藏/显示子菜单项答案

【问题标题】：Hide/Show submenu items in responsive navigation menu using CSS使用 CSS 在响应式导航菜单中隐藏/显示子菜单项
【发布时间】：2015-06-08 19:03:18
【问题描述】：

我创建了一个仅在手机上可见的菜单。

使用 CSS，我成功地创建了一个 SHOW/HIDE NAVIGATION 菜单。你可以在http://js.co.nz/mobile-test.php 看到这一点（目前仅在手机上的纵向视图中，因为这是我在开发中所获得的）。

我也希望能够显示/隐藏子菜单项（因为导航菜单很长！）。例如，如果用户单击“按类型浏览”，我想要以下子菜单：椅子；表格；镜子等出现。

html目前看起来是这样的：

<nav id="responsivenav" role="navigation">
<a href="#responsivenav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>
    <li><a href="../index.php">HOME</a></li>
    <li><a href="../all-stock.php">BROWSE ALL STOCK</a></li>
    <li><a href="#">BROWSE BY TYPE</a>
        <ul>
            <li><a href="../antique-chairs.php">Antique chairs</a></li>
            <li><a href="../dining-tables.php">Dining tables</a></li>
            <li><a href="../antique-mirrors.php">Antique mirrors</a><li>
        </ul>
    </li>     
    <li><a href="#">BROWSE BY CATEGORY</a></li>    
    <li><a href="#">BROWSE BY ROOM</a></li>    
    <li><a href="../reduced-items.php">REDUCED ITEMS</a></li>
    <li><a href="../opening-hours.php">OPENING HOURS</a></li>
    <li><a href="../news.php">NEWS</a></li>
    <li><a href="../find-us.php">FIND US</a></li>
    <li><a href="../about-john-stephens.php">ABOUT US</a></li>
    <li><a href="../brochures.php">BROCHURES</a></li>
    <li><a href="../period-styles.php">PERIOD STYLES</a></li>       
</ul>
<div class="clear"></div>
</nav>

css 看起来像这样：

#responsivenav {display:block;}

#responsivenav > a { }
#responsivenav:not( :target ) > a:first-of-type,
#responsivenav:target > a:last-of-type {
    display: block;
    height:50px;
    line-height:50px;
    font-size:15px;
    margin-bottom:0;
    padding:0;
    text-indent:100px;
    text-decoration:none;
    color:#fff;
    font-weight:bold;
    text-transform:uppercase;
    background: #393b3c url(../images/wd/mobile-menu-icon.jpg) no-repeat 40px center; }

/* first level */
#responsivenav > ul {
    height: auto;
    display: none;
    border-bottom:5px solid #fff;}

#responsivenav:target > ul {
    display: block;
    list-style:none;
    padding:0;
    margin:0;}

#responsivenav > ul > li {
    width: 100%;
    float: none;
    display:block;
    height:60px;
    line-height:60px;
    font-size:15px;
    text-indent:40px;
    border-top: 1px solid #eee;}

#responsivenav > ul > li a {
    text-decoration:none;
    color:#393b3c;}

/* second level */
#responsivenav > ul > li > ul {  
    display: none;
}
#responsivenav > ul > li:hover > ul {
    display:block;
}

我知道我没有做对的是第二级菜单。我尝试了各种方法，例如向子菜单添加类，使用 left:-9999px 而不是 display:none;等等，但似乎还没有任何效果。

请帮忙！我相信这应该很简单！

【问题讨论】：

标签： css mobile menu navigation

【解决方案1】：

只需将#responsivenav > ul > li 的属性height: 60px 替换为min-height: 60px（PhonePtest.css 文件中的第 138 行）。

目前，您的代码使子菜单出现在悬停时，以防移动设备在点击时显示。这就是导航菜单在点击时隐藏的原因。为了防止这种情况，您可以更换

<a href="#">BROWSE BY TYPE</a>

与

<a href="javascript:void(0)">BROWSE BY TYPE</a>

您可以对其他菜单元素执行相同操作。

【讨论】：