Question

所以我决定重新制作我的网站以使其响应，但是我无法在较小的屏幕上显示菜单！一切正常，从下拉菜单中显示出来！

这是我的HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alffi's "Blog"</title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
    <header>
        <h1>Welcome to Alffi's "Blog"!</h1>
    </header>
    <nav>
        <ul>
            <a href="#"><li>Home</li></a>
            <a href="#"><li>About Me</li></a>
            <a href="#"><li>Current Projects</li></a>
            <a href="#"><li>Downloads</li></a>
            <a href="#"><li>Login</li></a>
        </ul>
        <div class="handle">Menu</div>
    </nav>
    <section>
        Test Text: ldsngfgnfkgkgkgkfgjnbgjfsgkjfljfngfngfdlgnfdlgnfdlkgnfdlgnflknglkfgnlfnglfgnflgnfklgnkfgnlfkgnlfkngfdlkgnfdlkgnfdklgnfdklgnfdklngfdlkgnfkgnfdlkgnfdlgnflgndflkgnfdklgnfdklfdnlgkfdnlfdnglkfdnglfdknglfdkgnlfdkgnfdklgnfdklgnfdlkgnfdlkngfdklngfdlgnflgnfdlkgnfdklgnfdklgnfdlgnfdlkgnfdlkgnfdlkgnfdklgnfdlkgnlfdknglfd
    </section>
    <script>
    $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');
    });
    </script>
</body>
</html>

这是CSS：

    body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
header{
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
a{
    text-decoration: none;
    color: inherit;
}
nav ul{
    background-color: #43a286;
    overflow: hidden;
    color: white;
    padding: 0;
    text-align: center;
    margin: 0;
    -webkit-transition : max-height 0.4s;
    -ms-transition : max-height 0.4s;
    -moz-transition : max-height 0.4s;
    -o-transition : max-height 0.4s;
    transition : max-height 0.4s;

}
nav ul li{
    display: inline-block;
    padding: 20px;
}
nav ul li:hover{
    background-color: #399077
}
section{
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0 auto;
}

.handle{
    width: 100%;
    background: #005c48
    text-align: left;
    box-sizing: border-box;
    padding: 15px 10px;
    cursor: pointer;
    color: white;
}

@media screen and (max-width: 580px){
    nav ul{
        max-height: 0;
    }
    .showing{
        max-height: 20em;
    }
    nav ul li{
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
        text-align: left;

    }
    .handle{
        display: block;
    }
}

感谢您的帮助！

Answer 1

出现菜单句柄。它正好在标题下面，上面有白色文字。

将CSS背景从nav ul更改为nav：

nav {  /* here */
    background-color: #43a286;
}

nav ul{
    background-color: #43a286; /* not here */
    …
}

响应式网页上的下拉菜单无法正常工作

1 个答案: