html - 网站内容采用移动格式的菜单方式

Question

我正在使用 HTML 和 CSS 开发一个简单的响应式菜单，到目前为止一切似乎都正常，但是我在移动格式上遇到了一些问题。基本上，当菜单打开时，其下方的文本挡住了它的去路，无法看到菜单项。

html, body{
    width:100%;
    height:100%;
    margin:0;
}
html {
    font-family:"helvetica neue", sans-serif;
}
.nav{
    border-bottom: 1px solid #eaeaeb;
    text-align:right;
    height:50px;
    line-height:50px;
}
.menu{
    margin:0 30px 0 0;
}
.menu a{
    clear:right;
    text-decoration:none;
    color:gray;
    margin: 0 10px;
    line-height: 50px;
}
span{
    color:#54D17A;
}
label{
    margin:0 40px 0 0;
    font-size:26px;
    line-height: 50px;
    display: none;
    width:26px;
    float:right;
}
#toggle{
    display:none;
}

/*Media*/
@media only screen and (max-width:500px){
    label{
        display:block;
        cursor: pointer;
    }
    .menu{
        text-align: center;
        width:100%;
        display:none;
    }
    .menu a{
        display: block;
        border-bottom: 1px solid #eaeaeb;
        margin:0;
        line-height: 50px;
    }
    #toggle:checked + .menu{
        display:block;
    }
    #menu a:clicked + .menu {
        display:none;
    }

}

<div class="nav">
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle"/>
        <div class="menu">
            <a href = "#">Business</a>
            <a href = "Services.html">Services</a>
            <a href = "#">Learn more</a>
            <a href = "#"><span>Free Trial</span></a>
        </div>
    </div>
    <div class="stuff">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus similique voluptatum quas sit accusantium molestiae, cupiditate magnam soluta, ab inventore possimus placeat ipsum eum perspiciatis ipsam nobis nulla tenetur assumenda.
    </div>

正如您在移动模式下看到的那样，当您打开菜单时，网站上的文字挡住了路，用户看不到菜单选择。

有没有办法把菜单下面的内容下推，这样菜单就可见了？或替代解决方案，以便用户清楚地看到菜单以及切换图标。

Answer 1

有两个步骤可以解决这个问题，假设您希望导航在内容前面下拉:导航需要背景颜色，并且它需要比主要内容更高的 z-index，以便菜单呈现在前面，内容在它后面。

.menu {
    margin:0 30px 0 0;

    /* position the menu in front of the content */
    position: relative;
    z-index: 2;

    /* and make sure the content doesn't show through from behind */
    background-color: white;
}

另一方面，如果您希望所有内容垂直向下移动，使其位于导航下方，请查看 Epicular 的其他答案。