How do I make nested drop down menus in HTML? - css

Question

I am working on my school's website, and I have already figured out how to make single drop downs. Here is the code for one menu item.
.navbar {
overflow: hidden;
background-color: #0a0a2a;
font-family: Arial;
border: 3px solid #C5B358;
margin-left: -75px;
margin-right: -75px;
}
.navbar a {
float: left;
font-size: 12px;
color: white;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 12px;
border: none;
outline: none;
color: white;
padding: 8px 8px;
background-color: #0a0a2a;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #C5B358;
padding-top: 9px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0a0a2a;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
color: white;
}
.dropdown-content a {
float: none;
color: white;
padding: 10px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #C5B358;
color: #0a0a2a;
}
.dropdown:hover .dropdown-content {
display: block;
}
<form action="index.html">
<div class="dropdown">
<button class="dropbtn">HOME </button>
<div class="dropdown-content">
</div>
</div>
</form>
<!--Modular code begins here-->
<form action="aboutus.html">
<div class="dropdown">
<button class="dropbtn">ABOUT US
</button>
<div class="dropdown-content">
Calendar 2017-2018
Inclement Weather Information
Directions to Tri-County
2016 Report Card
District Information
Business Office
Contact Us
Public Records
School Committee
</div>
</div>
</form>
This works just fine, but some of the menu options, in this case "Business Office", have a submenu that needs to be added. Ideally, this would be a hover drop down that appears to the right of the drop down menu.
However, I can not figure out how this should work, and nothing on the internet seems to answer my question fully. So, I decided to consult trusty old Stack Overflow.
I tried adding the following code to my HTML, making new classes in the CSS with the same properties as the original drop down menu. It did not work.
<div class="sub-dropdown">
<button class="sub-dropbtn"> District Information</button>
<div class="sub-dropdown-content">
School Committee
</div>
</div>
If anybody can help me figure out where I went wrong, that would be much appreciated.