在本地驱动器中一切正常，但这些代码在Wordpress中根本不起作用

Question

我尝试在本地驱动器中编写响应菜单，一切正常，没有错误。

然而，响应式菜单在Wordpress blankslate中根本不起作用。请帮帮忙。我将完整的代码附加到jsfiddle中。谢谢。

我的HTML代码片段

<div id="nav_bar">
    <div class="group">
        <label for="toggle-1" class="title">Title-1</label><input type="checkbox" id="toggle-1">
        <div class="menu_list">
            <ul>
                <li><a href="#Menu-A1">Menu-A1</a></li>
                <li><a href="#Menu-A2">Menu-A2</a></li>
            </ul>
        </div>
    </div>

    <div class="group">
        <label for="toggle-2" class="title">Title-2</label><input type="checkbox" id="toggle-2">
        <div class="menu_list">
            <ul>
                <li><a href="#Menu-B1">Menu-B1</a></li>
                <li><a href="#Menu-B2">Menu-B2</a></li>
                <li><a href="#Menu-B3">Menu-B3</a></li>
            </ul>
        </div>
    </div>

    <div class="group">
        <label for="toggle-3" class="title">Title-3</label><input type="checkbox" id="toggle-3">
        <div class="menu_list">
            <ul>
                <li><a href="#Menu-C1">Menu-C1</a></li>
            </ul>
        </div>
    </div>

    <div class="group">
        <label for="toggle-4" class="title">Title-4</label><input type="checkbox" id="toggle-4">
        <div class="menu_list">
            <ul>
                <li><a href="#Menu-D1">Menu-D1</a></li>
                <li><a href="#Menu-D2">Menu-D2</a></li>
            </ul>
        </div>
    </div>
</div>

​

我的CSS代码片段

@media all and (min-width:100px) and (max-width:1024px) {
 #nav_bar {
        display: none;
    }

    #menu {
        display: block;
    }

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

    .group {
        text-align: left;
        position: block;
    }

    .group:hover {
        background-color: gray;
    }

    .title {
        display: block;
        padding: 15px;
    }

    .title:active {
        color: red;
    }

    .menu_list {
        width: 100%;
    }

    [id^="toggle"]:checked + .menu_list {
        display: block;
    }
}

我一直在修改代码，但仍然不能解决这个问题。

Answer 1

我解决了这个问题，是的，当你使用这个jsfiddle代码作为HTML时，它可以工作，但是当你添加Wordpress的主题时，它不能工作在这里有两个问题

已经由WordPress添加的

1. 导航类，它是CSS，所以我要做的是将此代码添加到二十一二主题中，原始的导航类的css是

导航{ background-color: lightcoral；display: block；}

要导航{ background-color: lightcoral；display: block；overflow: unset !important；}

和2是css中的+运算符，我将其更改为~这项工作，因此这里是完全更新的css

单击上面的帮助图标了解更多信息。

*/
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

nav {
    background-color: lightcoral;
    display: block;
    overflow: unset !important;
}
#menu {
    padding: 1%;
    text-align: center;
    color: white;
    font-size: 180%;
    display: none;
}
[id^="toggle"] {
    display: none;
}


/*  NAVAGATION TITLE */

.group {
    position: relative;
}

.title {
    cursor: pointer;
    color: white;
    font-size: 120%;
}

/* MENU LIST */

.menu_list {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    box-shadow: 0px 0px 5px 1px grey;
    cursor: pointer;
    z-index: 1;
}

.menu_list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu_list ul li:hover {
    background-color: lightgray;
}

.menu_list ul li a {
    text-decoration: none;
    display: block;
    padding: 20px;
    color: black;
}

/* FOR MOBILE DEVICE */

@media all and (min-width:100px) and (max-width:1024px) {
    #nav_bar {
        display: none;
    }

    #menu {
        display: block;
    }

    #toggle:checked~#nav_bar {
        display: block;
    }


    .group {
        text-align: left;
        position: block;
    }

    .group:hover {
        background-color: gray;
    }

    .title {
        display: block;
        padding: 15px;
    }

    .title:active {
        color: red;
    }

    .menu_list {
        width: 100%;
    }

    [id^="toggle"]:checked~.menu_list {
        display: block;
    }
}

/* FOR DESKTOP AND LAPTOP */

@media all and (min-width:1025px) {
    .group {
        display: inline-block;
        text-align: left;

    }

    .group:hover .menu_list {
        display: block;
    }

    .title {
        width: 150px;
        padding: 25px;
        display: block;
        text-align: center;
    }

    .title:hover {
        background-color: gray;
    }

    .menu_list ul li {
        width: 250px;
    }

}

在HTML中没有更新使用相同的更新检查附件屏幕截图

​

​

​

​

​