工作导航但切换不打开

Question

After nearly a week I am still struggling with toggle on navigation. This is my current CSS, what I need to do now, is simply get the toggle to open, it did open before so something minor is stopping it now but I cant work it out. I do not really know much about CSS as I keep forgetting it, but I do not know javascript or jquery

 .nav { background-color: #3333FF; width: 100%; }.menu label, #hamburger { display: none; }.menu ul { font-family: Monserrat, sans-serif; font-size: 18px; color: white; list-style-type: none; margin: 0; padding: 0; }.menu ul li { text-align: center; display: inline-block; padding: 10px; width: 11.11%; }.menu ul li a { color: #fff; text-decoration: none; }.menu li:visited { background: #0000EE; color: #fff; }.menu li:active, .active { background: #0000EE; color: #fff; }.menu li:hover { background: #0000EE; color: #fff; } label { margin: 0 20px 0 0; font-size: 20px; line-height: 44px; display: none; } #toggle { display: none; } /* Show Hamburger */ @media screen and (max-width: 768px) {.nav { background-color: #3333FF; width: 100%; } ```.menu label { display: inline-block; color: #fff; background-color: #3333FF; padding-bottom: 8px; }.menu ul { display: none; }.menu ul li { display: block; border-top: 1px solid #333; }.menu ul li:active { display: block; }.menu label { cursor: pointer; margin: 0 20px 0 0; font-size: 20px; font-weight: bold; line-height: 44px; display: block; } #toggle:checked+.menu { display: block; }

 <div class="nav"> <div class="menu"> <label for="toggle">&#9776;</label><input type="checkbox" id="toggle"> <ul> <li><a href="http://index.html">Home</a></li> <li><a href=" http://news.html">News</a></li> <li><a href="http://contacts.html">Contacts</a></li> <li><a href="http://policies.html">Policies</a></li> <li class="active"><a href="http://members.html">Members</a></li> <li><a href="http://volunteer.html">Volunteer</a></li> <li><a href="http://links.html">Links</a></li> </ul> </div> </div>

Answer 1

Just change your selector from:

#toggle:checked+.menu {
    display: block;
}

to:

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

See snippets below:

 .nav { background-color: #3333FF; width: 100%; }.menu label, #hamburger { display: none; }.menu ul { font-family: Monserrat, sans-serif; font-size: 18px; color: white; list-style-type: none; margin: 0; padding: 0; }.menu ul li { text-align: center; display: inline-block; padding: 10px; width: 11.11%; }.menu ul li a { color: #fff; text-decoration: none; }.menu li:visited { background: #0000EE; color: #fff; }.menu li:active, .active { background: #0000EE; color: #fff; }.menu li:hover { background: #0000EE; color: #fff; } label { margin: 0 20px 0 0; font-size: 20px; line-height: 44px; display: none; } #toggle { display: none; } /* Show Hamburger */ @media screen and (max-width: 768px) {.nav { background-color: #3333FF; width: 100%; }.menu label { display: inline-block; color: #fff; background-color: #3333FF; padding-bottom: 8px; }.menu ul { display: none; }.menu ul li { display: block; border-top: 1px solid #333; }.menu ul li:active { display: block; }.menu label { cursor: pointer; margin: 0 20px 0 0; font-size: 20px; font-weight: bold; line-height: 44px; display: block; } #toggle:checked+ul { display: block; }

 <div class="nav"> <div class="menu"> <label for="toggle">&#9776;</label><input type="checkbox" id="toggle"> <ul> <li><a href="http://index.html">Home</a></li> <li><a href=" http://news.html">News</a></li> <li><a href="http://contacts.html">Contacts</a></li> <li><a href="http://policies.html">Policies</a></li> <li class="active"><a href="http://members.html">Members</a></li> <li><a href="http://volunteer.html">Volunteer</a></li> <li><a href="http://links.html">Links</a></li> </ul> </div> </div>

Answer 2

Here is an example for this. You can try this code. It is fully tested. I hope it will help you. You can change colors and backgrounds as per needed in this code.

 nav ul ul { display: none; } nav ul ul li { float: none; } nav li { float: left; list-style-type: none; } nav li a { text-decoration: none; display: inline-block; margin: 10px 20px 5px 0; padding: 8px 10px; } nav li a:link, nav li a:visited { color: #646565; background: #e8e9eb; } nav li a:link:hover, nav li a:visited:hover { color: black; } nav li:hover ul { display: block; position: absolute; } input.toggle, label.toggle { display: none; } label.toggle { font-weight: 900; font-size: 1.2em; padding: 10px 20px; } @media (max-width: 960px) { nav { display: none; } input.toggle, .toggle span { display: none; } input[type=checkbox]:checked ~ nav, label.toggle { display: block; cursor: pointer; } nav li { float: none; } nav li:hover ul { display: block; position: relative; } nav li ul { display: block; } nav li ul li { margin-left: 20px; } nav li a { display: block; margin-left: 20px; } }

 <div class="wrapper"> <label class="toggle" for="toggle">&#9776; <span>Menue</span></label> <input class="toggle" id="toggle" type="checkbox"> <nav> <ul> <li class="current"><a href="http://index.html">Home</a></li> <li><a href=" http://news.html">News</a></li> <li><a href="http://contacts.html">Contacts</a></li> <li><a href="http://policies.html">Policies</a></li> <li><a href="http://members.html">Members</a></li> <li><a href="http://volunteer.html">Volunteer</a></li> <li><a href="http://links.html">Links</a></li> </ul> </nav> </div>