Question

Goodmorning：D

我正在尝试为我的网站制作菜单。在我的CSS中，我有.responsive-menu ul 我想要在屏幕宽度为750px时显示。我为此做了一个@media，但它没有用。我试图只使用CSS，所以我不想使用任何JavaScript。当你在全屏显示网站时，菜单工作就像我想要的那样唯一的问题是响应式菜单。我正在使用复选框来点击菜单。

因此，如果屏幕宽度为750px而不是我想.menu消失并显示.responsive-menu

这是我的HTML：

<html>
    <head>
        <link rel="stylesheet" href="stylesheet.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    </head>
    <body>
        <div class="header">
            <div class="naam">
                <p>Bart van Bussel <i class="fa fa-check"></i></p>
            </div>
            <input type="checkbox" id="trigger" />
            <div class="menu">
                <ul>
                    <li>
                        <label for="trigger"><i class="fa fa-bars"><span class="menu-naam">Menu</span></i></label>
                        <ul class="dropdown">
                            <li>
                                <a href="">Random stuff</a>
                            </li>
                            <li>
                                <a href="">stuff I made</a>
                            </li>
                            <li>
                                <a href="">About myself</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="responsive-menu">
                <ul>
                    <li>About myself</li>
                    <li>stuff I made</li>
                    <li>Random stuff</li>
                </ul>
            </div>
        </div>
    </body>
</html>

这是我的CSS：

* {
    padding:0;
    margin:0;
    font-family:arial;
}

/*--------Header-------*/

.header {
    background-color:#f1f1f1;
    height:50px;
    width:100%;
    position: fixed;
    box-shadow: inset 0px -200px 16px -200px rgba(0,0,0,0.75);
}

.naam p{
    font-size:25px;
    padding:12px;
    width:100%;
}

/*--------Menu-------*/

.menu ul li i {
    float:right;
    font-size:35px;
    position:relative;
    top:-65px;
    padding:20px;
    cursor: pointer;
}

.menu ul li ul {
    display:none;
}

.menu ul li ul li {
    display:inline;
    float:right;
    position:relative;
    top:-53px;
}

.dropdown li a{
    color:black;
    text-decoration:none;
    padding:20px;
}

.menu-naam {
    font-family:arial;
    font-size:25px;
    padding:8px;
    position:relative;
    bottom:3px;
}

.responsive-menu ul {
    display:none;
    color:black;
    position:absolute;
    background-color:rgba(255,255,255,0.8);
    width:100%;
    top:50px;
}

.responsive-menu ul li {
    padding:10px;
    text-align:center;
}

#trigger {
    display: none;
}
#trigger:checked + .menu ul li ul {
    display: block;
}

#trigger:checked + .menu ul li {
    color:gray;
}

/*--------Media-------*/

@media screen and (max-width:750px) {
    .background p {
        font-size:900%;
    }
    .menu ul li ul li {
        display:none;
    }
    #trigger:checked + .responsive-menu ul {
        display:block;
    }
}

我希望有人可以帮助我解决这个问题：）

这是JSfiddle。

Answer 1

问题在于#trigger:checked + .responsive-menu，这不起作用。 +运算符仅适用于源中彼此相邻的元素。

解决方案：使用~运算符，如果两个元素之间有东西，它也可以运行。

New fiddle

Answer 2

你可以尝试这个：

* {
    padding:0;
    margin:0;
    font-family:arial;
}

/*--------Header-------*/

.header {
    background-color:#f1f1f1;
    height:50px;
    width:100%;
    position: fixed;
    box-shadow: inset 0px -200px 16px -200px rgba(0,0,0,0.75);
}

.naam p{
    font-size:25px;
    padding:12px;
    width:100%;
}

/*--------Menu-------*/

.menu ul li i {
    float:right;
    font-size:35px;
    position:relative;
    top:-65px;
    padding:20px;
    cursor: pointer;
}

.menu ul li ul {
    display:none;
}

.menu ul li ul li {
    display:inline;
    float:right;
    position:relative;
    top:-53px;
}

.dropdown li a{
    color:black;
    text-decoration:none;
    padding:20px;
}

.menu-naam {
    font-family:arial;
    font-size:25px;
    padding:8px;
    position:relative;
    bottom:3px;
}

.responsive-menu ul {
    display:none;
    color:black;
    position:absolute;
    background-color:rgba(255,255,255,0.8);
    width:100%;
    top:50px;
}

.responsive-menu ul li {
    padding:10px;
    text-align:center;
}

#trigger {
    display: none;
}
#trigger:checked + .menu ul li ul {
    display: block;
}

#trigger:checked + .menu ul li {
    color:gray;
}

/*--------Media-------*/

@media screen only and (max-width:750px) {
    .background p {
        font-size:900%;
    }
    .menu ul li ul li {
        display:none;
    }
    #trigger:checked + .responsive-menu ul {
        display:block;
    }
}

DEMO HERE

Answer 3

@media它运作正常，错误是您使用的选择器。

你说这个，你只隐藏 li ，而不是他的父 .menu ：

.menu ul li ul li {
    display:none;
}

并使用UL，您使用display：none;在UL元素上，而不是.responsive-menu

#trigger:checked + .responsive-menu ul{
    display: block;
}

其他事项：.responsive-menu不嵌套：#trigger：checked。 #trigger的嵌套元素是.menu。所以这不行。

在简历中，只需在@media中执行此操作：

.menu{
    display:none;
}

.responsive-menu ul{
    display: block;
}

如果我的回答没有帮助你，请告诉我，我会更好地解释

只有CSS的下拉菜单

3 个答案: