Subnavbar drop down menu not working - html

Question

My drop down menu was working when I only had one navigation bar, but now that the tutoring pages of my business became sub pages in a website featuring all my businesses, I made the tutoring navigation bar a subnavbar, and at that point, my drop down menus stopped working. When I hover over "services," "contact me," and "resources," I should see a drop down menu, but I don't, so now there are several pages clients can not access. I do not get why they stopped working, and I have tried to research this, but I feel like I have done everything right...
CSS CODE
**/* 1st Navigation Bar */**
#nav {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(94, 185, 176);
}
.navbar {
height: 40px;
margin: 0;
padding: 0;
border-right: 1px solid #54879d;
}
.navbar li {
height: 50px;
width: 155px;
float: right;
text-align: center;
list-style: none;
margin: 0;
background-color: rgb(94, 185, 176);
font: normal 200%/110% 'chocolatebox deco regular',sans-serif;
font-size: 16px;
}
.navbar a {
padding: 14px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #74e3d8; /* Creates a border in a slightly lighter shade of blue than the background. */
border-right: 1px solid #4d9a92; /* Creates a border in a slightly darker shade of blue than the background. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: black;
display: block;
}
.navbar li a:hover {
background-color: #ffe643;
}
.navbar li.active {
background-color: #ffe643;
border-bottom: 5px dashed black;
text-decoration: underline;
}
**/* 2nd Nav bar */**
#subnav {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ffe643;
}
.subnavbar {
height: 40px;
margin: 0;
padding: 0;
border-right: 1px solid #54879d;
}
.subnavbar li {
height: 50px;
width: 155px;
float: right;
text-align: center;
list-style: none;
margin: 0;
background-color: #ffe643;
font: normal 200%/110% 'chocolatebox deco regular',sans-serif;
font-size: 16px;
}
.subnavbar a {
padding: 14px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #fefefb; /* Creates a border in a slightly lighter shade of yellow than the background. */
border-right: 1px solid #fee121; /* Creates a border in a slightly darker shade of yellow than the background. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: black;
display: block;
}
.subnavbar li:hover, a:hover {
background-color: #CFEAE7;
}
.subnavbar li.active {
background-color: #CFEAE7;
**/* Drop down menu */**
.subnavbar li ul {
display: none; /* Hides the drop-down menu */
z-index: 999;
height: 50px;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
background-color: rgb(94, 185, 176);
}
.subnavbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.subnavbar li ul li a {
border-left: 1px solid #74e3d8;
border-right: 1px solid #74e3d8;
border-top: 1px solid #4d9a92;
border-bottom: 1px solid #4d9a92;
}
.subnavbar li ul li a:hover{
background-color: #ffe643;
}
HTML CODE (This is the code for both nav bars)
<div id="nav">
<ul class="navbar">
<li>Content Writing</li>
<li>Editing</li>
<li>Video Courses</li>
<li class="active">Tutoring</li>
<li><a href=http://tutorwithkatie.org/Blog/blog-2>Blog</a></li>
<li>Home</li>
</ul>
<div id="subnav">
<ul class="subnavbar">
<li></li>
<li>Resources
<ul>
<li>English Resources</li>
<li>Math Resources</li>
<li>Study skills and organization Resources</li>
<li>Parent Resources</li>
</ul>
</li>
<li>Contact Me
<ul>
<li>Request Information</li>
<li>Schedule new client appoitnment</li>
<li>Contact Details</li>
</ul>
</li>
<li>Policies</li>
<li>Current Students
</li>
<li>Services
<ul>
<li>English Tutoring</li>
<li>Homeschool English</li>
<li>Math Tutoring</li>
<li>Online Tutoring</li>
</ul>
</li>
</ul>
<div>
So I have display: none; to hide it and then display: block; to show it on hover, but it no longer displays it on hover. It used to and then the moment I added the first nav bar and called this class .subnavbar, it stopped working....

Answer 1

The reason it isn't working is because you have a lot of issues:
Extra * in your code that are causing CSS issues and are messing up with you CSS. Take all the comment lines out that look like this:
**/* Drop down menu */**
and replace them with a valid comment like this:
/* Drop down menu */
There also is a missing closing } on this CSS rule
.subnavbar li.active {
background-color: #CFEAE7;
and also change this line on the #subnav from overflow: hidden; to overflow: visible; to display the SubNav when you hover over it.
#subnav {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0;
padding: 0;
overflow: visible;
background-color: #ffe643;
}
Also a missing closing </div> tag in the HTML for <div id="nav"> and also you have a <div> instead of a closing </div> at the end of the <div id="subnav">.
Here is a working JSFIDDLE for reference where it is working. Hope that clears things up.