Question

我尝试制作带有下拉菜单的自适应导航菜单，但移动导航下拉列表与页脚重叠。我怎样才能使下拉按下页脚而不是重叠？

＆＃13;

@font-face {
    font-family: 'FairydustB';
    }

    body {
    margin: 0;
    padding: 0;
    background: gainsboro;
    font-size: 1em;
    }

    header {
    width: 100%;
    height: 64px;
    margin: 0;
    padding: 0 0 4px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: white;
    box-shadow: 0 1px 16px gray;
    }

    #logo {
    width: 10%;
    display: inline;
    margin: 0 0 0 10%;
    padding: 0 0 8px 0;
    float: left;
    text-align: right;
    font-family: 'FairydustB';
    font-size: 3em;
    text-decoration: none;
    border: none;
    }

    #logo:hover {
    background: white;
    }

    .red {
    color: red;
    }

    .green {
    color: limegreen;
    }

    nav {
    width: 60%;
    float: right;
    margin: 24px 20% 0 0;
    padding: 0;
    font-family: sans-serif;
    }
 
    ul {
    display: flex;
    justify-content: space-between;
    margin: auto;
    padding: 0 96px;
    list-style: none;
    }
 
    li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    }
 
    a {
    margin: 0;
    padding: 23px;
    color: gray;
    text-decoration: none;
    font-size: 1em;
    }
 
    a:hover {
    background: honeydew;
    color: limegreen;
    }
 
    #menu-icon {
    display: none;
    }
  
    .dropmenu {
    display: none;
    position: relative;
    margin: 0;
    padding: 0;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    }
 
    .dropmenu a {
    padding: 16px;
    display: block;
    text-align: left;
    }
 
    .dropdown:hover .dropmenu {
    display: block;
    background: azure;
    }

    footer {
    display: block;
    width: 100%;
    height: 64px;
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    background: white;
    }

    @media only screen and (max-width : 880px) {
    #logo {
        width: 20%;
        margin: 0 0 0 16px;  
    }   
    
    nav {
        width: 60%;
        float: left;
        margin: 24px 0 0 0;
        padding: 0;
        font-family: sans-serif;
    }
 
    ul {
        display: flex;
        justify-content: space-between;
        margin: auto;
        padding: 0 32px;
        list-style: none;
    }
    }


    @media only screen and (max-width : 800px) {
    
    header {
        position: fixed;
    }

    #logo {
        width: 70%;
        display: block;
        margin: 0;
        padding: 8px 0 12px 16px;
        float: left;
        text-align: left;
        font-size: 2.5em;
    }
    
    div {
        margin: 0 0 0 0;
        padding: 12px 0 0 0;
    }
    
    #menu-icon {
        display: block;
        width: 25%;
        height: 57px;
        position: fixed;
        top: 0;
        right: 0;
        list-style: none;
        background: limegreen;
    }
    
    .menu-bar {
        display: block;
        width: 32px;
        height: 4px;
        margin: 8px auto;
        padding: 0;
        text-align: center;
        background: white;
    }

    .menu-bar a {
        display: none;
    }

    nav ul {
        display: inline-block;
        position: fixed;
        right: 0;
        top: 68px;
        width: 80%;
        float: right;
        margin: 0 auto 16px auto;
        padding: 0;
        background: white;
    }

    nav li {
        display: block;
        margin: 0;
        padding: 0;
        text-align: left;
        background: white;
        border: 1px solid skyblue;
    }

    nav a {
        display: block;
        color: black;
        text-decoration: none;
    }

    nav:hover ul {
         display: block;
         background: white;
    }
    }

＆＃13;

<html>
<header>
        <a href="#" id="logo"><span class="red">Red</span><span class="green">Green</span></a>
        <nav>
            <div id="menu-icon">
                <li class="menu-bar"><a>.</a></li>
                <li class="menu-bar"><a>.</a></li>
                <li class="menu-bar"><a>.</a></li>
            </div>
            <ul>
                <li><a href="#">HOME</a></li>
                <li class="dropdown"><a href="#" class="dropbtn">QUESTIONS</a>
                    <div class="dropmenu">
                        <a href="#">LINK</a>
                        <a href="#">LINK</a>
                        <a href="#">LINK</a>
                    </div>
                </li>
                <li class="dropdown"><a href="#">PHILOSOPHY</a>
                    <div class="dropmenu">
                        <a href="#">LINK</a>
                        <a href="#">LINK</a>
                        <a href="#">LINK</a>
                    </div>
                </li>
                <li class="dropdown"><a href="#">HISTORY</a>
                    <div class="dropmenu">
                        <a href="#">LINK</a>
                        <a href="#">LINK</a>
                        <a href="#">LINK</a>
                    </div>
                </li>
                <li><a href="#">ABOUT</a></li>
            </ul>
        </nav>
    </header>
    <footer>
        <nav id="botnav">
            <ul>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
        </nav>
    </footer>
</html>

＆＃13;

Answer 1

您的页脚有position: fixed，它将其从正常页面流中取出，因此它不会“保留”页面上的空间。您需要将页脚更改为position: relative，以便不会从页面流中删除它。

Answer 2

将页脚链接移出导航并进入div

<div id="botnav">
    <ul>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
    </ul>
</div>

如何从重叠的页脚停止css下拉菜单？

2 个答案: