如何在HTML中创建嵌套下拉菜单？

Question

我正在我学校的网站上工作，而且我已经想出了如何进行单项下载。这是一个菜单项的代码。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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">
      <a href="#">Calendar 2017-2018</a>
      <a href="#">Inclement Weather Information</a>
      <a href="#">Directions to Tri-County</a>
      <a href="#">2016 Report Card</a>
      <a href="#">District Information</a>
      <a href="#">Business Office</a>
      <a href="#">Contact Us</a>
      <a href="#">Public Records</a>
      <a href="#">School Committee</a>
    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

这很好用，但是在这种情况下，某些菜单选项＆＃34; Business Office＆＃34;有一个需要添加的子菜单。理想情况下，这将是下拉菜单右侧显示的悬停下拉菜单。

然而，我无法弄清楚这应该如何运作，互联网上的任何内容似乎都没有完全回答我的问题。所以，我决定咨询可靠的旧Stack Overflow。

我尝试将以下代码添加到我的HTML中，使CSS中的新类具有与原始下拉菜单相同的属性。它不起作用。

<div class="sub-dropdown">
    <button class="sub-dropbtn"> District Information</button>
    <div class="sub-dropdown-content">
        <a href="#">School Committee</a>
    </div>
</div> 

如果有人可以帮我弄清楚我哪里出错了，那将非常感激。