时间戳

首页 > 解决方案 > 如何下压

下面何时出现下拉菜单按钮？

html - 如何下压
下面何时出现下拉菜单按钮？

问题描述

我在那个网站上工作只是为了学习 HTML 和 CSS，而不是先用 JS。所以这就是为什么我在这里寻找没有JS的解决方案。

当页面宽度小于 1081 像素时，顶部的菜单按钮会变成汉堡菜单。如果单击导航栏下方弹出的菜单按钮-但是-不幸的是，这些按钮位于下面框的顶部，我想在单击汉堡菜单时将其按下。有人可以给我一个关于如何做到这一点的提示吗？没有 jscript，我在网上找不到任何解决方案。

HTML：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Rakete</title>
    </head>

    <body>
        <nav>
            <div id="navigation">
                <div class="wrapper">
                    <div id="logo"></div>
                    <label for="toggle">&#9776;</label>
                    <input type="checkbox" id="toggle"/>
                    <div id="menu">
                        <a href="#">Home</a>
                        <a href="#">About Us</a>
                        <a href="#">Contact</a>
                        <a href="#">Imprint</a>
                    </div>            
                </div>
            </div>
        </nav>

        <div id="main">
            <div class="wrapper">
               <div id="top-boxes">
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
               </div>

            <p>
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

            </p>
         </div>
        </div>
    </body>
</html>

CSS：

*
{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.wrapper
{
    margin: 0 auto;
    width: 70%;
}

/* Navigation */

#navigation
{
    width: 100%;
    height: 5em;
    line-height: 5em;
    background-color: darkgrey;
    top: 0;

}



#logo
{
    margin: 1em;
    width: 2.5em;
    height: 2.5em;
    background-size: 2.5em 2.5em;
    background-image: url("rocket.png");
    float: left;
}

/* ### Menu ### */


#menu
{   
     text-align: right;
     width: 100%;


}

#menu a
{
    margin: 0 1em;
    line-height: 5em;
    clear: right;
    color: black;
    font-family: sans-serif;
    font-style: normal;
    font-weight: 100;
}


label 
{
    margin: 1em;
    font-size: 1.5em;
    line-height: 1.25em;
    display: none;
    width: 1em;
    float: right;
}

#toggle 
{
    display: none;
}


@media only screen and (max-width: 1081px) 

{
    label 
    {
        display: block;
        cursor: pointer;
    }
    #menu 
    {
        text-align: center;
        width: 100%;
        display: none;
    }
    #menu a 
    {
        display: block;
        border-bottom: 1px solid black;
        margin: 0;

    }
    #toggle:checked + #menu 
    {
        display: block;
    }    
}

/* Content */

#main p
{
    margin: auto;
    margin-top: 2em; 
    clear: both;
}

#top-boxes
{
    text-align: center;

     display: inline-block;
}

.box
{
    width: 10em;
    height: 5em;
    padding: 1em;
    margin: 1em;
    margin-top: 3em;
    border: solid black 2px;
    box-sizing: border-box;
    background-color: gray;
    display: inline-block;

}

这是我的代码： https ://codepen.io/andy4117/pen/NWqzqxo

提前致谢！

标签： htmlcssdropdown

解决方案

使用min-height而不是height为您的#navigation造型。

老的

#navigation {
    ...
    height: 5em;
    ...
}

新的

#navigation {
    ...
    min-height: 5em;
    ...
}

注意：此解决方案特定于您的情况。不同的标记可能需要不同的解决方案。

推荐阅读