在本地驱动器中一切都很好，但这些代码在Wordpress中不起作用

Question

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

但是，响应式菜单根本不适用于Wordpress空白。请帮忙。我附上了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的主题时它不工作两个问题在这里

1. 已经由WordPress添加的nav类和它的CSS所以我做的是我将这个代码添加到二十二个主题和原始的nav类的CSS nav {background-color：lightcoral;显示：块; } 导航{background-color：lightcoral;显示：块;溢出：未设置！重要; }

和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中没有更新使用同一个检查附件screenshot