Third drop down menu not showing up on mobile resize - html

Question

I can't figure out why my third drop down menu is not working, the first two drop down menu are working perfectly on desktop, tablet and mobile resize, but the third drop down menu only works on desktop, but not on mobile. Any help will be appreciated thanks.This is my nav menu html code:
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin:0;
padding: 0;
background-color: #000000;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content:"";
display:table;
clear:both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
display: flex;
justify-content: center;
padding:0;
margin:0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display:inline-block;
float: left;
background-color: #000000;
}
/* Styling the links */
nav a {
display:block;
padding:14px 20px;
color:#FFF;
font-size:17px;
text-decoration:none;
line-height: 32px;
}
nav ul li ul li:hover { background: #000000; }
/* Background color change on Hover */
nav a:hover {
background-color: #FFC213;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
z-index: 3;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top:-60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left:170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
#media all and (max-width : 768px) {
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #000000;
padding:14px 20px;
color:#FFF;
font-size:17px;
text-decoration:none;
border:none;
}
.toggle:hover {
background-color: #FFC213;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #FFC213;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a{
padding:14px 20px;
color:#FFF;
font-size:17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position:static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover***********effect changes on mobile review */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
/*****mobile dorpdown code*********z-index:0;***********/
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
#media all and (max-width : 150px) {
nav ul li {
display:block;
width: 94%;
}
}
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">About Us +</label>
About Us
<input type="checkbox" id="drop-1" />
<ul>
<li>Methodology</li>
</ul>
</li>
<li>Services</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">List of Courses +</label>
List of Courses
<input type="checkbox" id="drop-2" />
<ul>
<li>Administration</li>
<li>Agriculture</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Ongoing Courses +</label>
Ongoing Courses
<input type="checkbox" id="drop-2" />
<ul>
<li>Creative</li>
<li>Enterprise</li>
<li>Microsoft excel</li>
<li>Hardware</li>
<li>Management</li>
<li>Microsoft Office</li>
<li>Networking</li>
<li>Web design</li>
<li>Web development</li>
</ul>
</li>
<li>Events</li>
<li>Contact</li>
<li>
<img src="images/soc/facebook1.png" height="32" width="32">
</li>
<li>
<img src="images/soc/twitter1.png" height="32" width="32">
</li>
<li>
<img src="images/soc/instagram1.png" height="32" width="34">
</li>
</ul>
</nav>

Answer 1

You are using "drop-2" for both the second and third dropdown. Change it to for="drop-3" and id="drop-3" for the third menu, and it will work.
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin:0;
padding: 0;
background-color: #000000;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content:"";
display:table;
clear:both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
display: flex;
justify-content: center;
padding:0;
margin:0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display:inline-block;
float: left;
background-color: #000000;
}
/* Styling the links */
nav a {
display:block;
padding:14px 20px;
color:#FFF;
font-size:17px;
text-decoration:none;
line-height: 32px;
}
nav ul li ul li:hover { background: #000000; }
/* Background color change on Hover */
nav a:hover {
background-color: #FFC213;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
z-index: 3;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top:-60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left:170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
#media all and (max-width : 768px) {
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #000000;
padding:14px 20px;
color:#FFF;
font-size:17px;
text-decoration:none;
border:none;
}
.toggle:hover {
background-color: #FFC213;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #FFC213;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a{
padding:14px 20px;
color:#FFF;
font-size:17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position:static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover***********effect changes on mobile review */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
/*****mobile dorpdown code*********z-index:0;***********/
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
#media all and (max-width : 150px) {
nav ul li {
display:block;
width: 94%;
}
}
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">About Us +</label>
About Us
<input type="checkbox" id="drop-1" />
<ul>
<li>Methodology</li>
</ul>
</li>
<li>Services</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-3" class="toggle">List of Courses +</label>
List of Courses
<input type="checkbox" id="drop-3" />
<ul>
<li>Administration</li>
<li>Agriculture</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Ongoing Courses +</label>
Ongoing Courses
<input type="checkbox" id="drop-2" />
<ul>
<li>Creative</li>
<li>Enterprise</li>
<li>Microsoft excel</li>
<li>Hardware</li>
<li>Management</li>
<li>Microsoft Office</li>
<li>Networking</li>
<li>Web design</li>
<li>Web development</li>
</ul>
</li>
<li>Events</li>
<li>Contact</li>
<li>
<img src="images/soc/facebook1.png" height="32" width="32">
</li>
<li>
<img src="images/soc/twitter1.png" height="32" width="32">
</li>
<li>
<img src="images/soc/instagram1.png" height="32" width="34">
</li>
</ul>
</nav>