如何将多级下拉菜单复选框列表变成外观正确的导航栏？

Question

我首先观看了这个YouTube视频https://www.youtube.com/watch?v=EalgZXjDR2Q，然后尝试将按钮更改为简单的链接以创建外观正常的导航栏，但是在尝试更改CSS时很快遇到了问题。现在，每当我将鼠标悬停在导航栏上的任何选项（关于我，位置，让我们谈谈）上时，子菜单都会显示在菜单上方而不是菜单下方。我还希望第二个子菜单在将鼠标右键悬停在右菜单项而不是开始时弹出，并使其出现在第一个子菜单项的右侧。

我尝试将导航栏选项（关于我，位置，让我们聊聊）设置为<li>和<a>，但这没用。

这是我希望布局看起来像的样子：https://forum.webflow.com/t/how-to-do-this-dropdown/47102。但是我的CSS被覆盖了（背景颜色发生变化，包括有效的背景颜色）

header {
  background-color: lavender;
  height: 100%;
}

body {
  background: url('Woods.jpeg') no-repeat;
  background-size: cover;
}

.navbaroption1>.navbaro1dropdown {
  display: none;
  margin: -40px 0 0 173px;
}

.navbaroption1:hover>.navbaro1dropdown {
  display: block;
}

.navbaroption2>.navbaro2dropdown {
  display: none;
  margin: -40px 0 0 173px;
}

.navbaroption2:hover>.navbaro2dropdown {
  display: block;
}

.navbaroption3>.navbaro3dropdown {
  display: none;
  margin: -40px 0 0 173px;
}

.navbaroption3:hover>.navbaro3dropdown {
  display: block;
}

.navbar {
  background-color: black;
  width: 100%;
  opacity: 90%;
}


/*navigation bar in general */

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navbar li {
  float: left;
}

.navbar li a,
.navbaroption1,
.navbaroption2,
.navbaroption3 {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbaroption1 li,
.navbaroption2 li,
.navbaroption3 li {
  display: inline-block;
}

.navbaro1dropdown a,
.navbaro2dropdown a,
.navbaro3dropdown a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.navbaroption1 {
  color: white;
  width: 33%;
}


/* About Me */

.navbaroption1:hover {
  background-color: darkgray;
  opacity: 80%;
  display: block;
}

.navbaroption1:hover:not {
  background-color: black;
}

.navbaro1dropdown {
  color: white;
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Bio - Instagram */

.navbaro1dropdown a:hover {
  background-color: gray;
  opacity: 70%;
  display: block;
}

.navbaro1dropdown a:hover:not {
  background-color: black;
  opacity: 80%;
}

.navbaroption2 {
  color: white;
  width: 33%;
}


/* Locations */

.navbaroption2.active {
  background-color: darkred;
}

.navbaroption2:hover {
  background-color: darkblue;
  opacity: 80%;
  display: block;
}

.navbaro2dropdown {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* USA - Europe - Asia - Africa - Mexico - Brazil (and everything under it) */

.navbaro2dropdown a.active {
  background-color: red;
  opacity: 80%;
}

.navbaro2dropdown a:hover {
  background-color: blue;
  opacity: 70%;
  display: block;
}

.navbaroption3 {
  color: white;
  width: 33%;
}


/* Let's talk */

.navbaroption3:hover {
  background-color: darkgray;
  opacity: 80%;
  display: block;
}

.navbaroption3:hover:not {
  background-color: black;
}

.navbaro3dropdown {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Email - Phone */

.navbaro3dropdown a:hover {
  background-color: gray;
  opacity: 70%;
}

.navbaro3dropdown a:hover:not {
  background-color: black;
  opacity: 80%;
}

#Title {
  text-align: left;
  width: 68%;
  font-size: 35px;
  color: crimson;
  font-family: Garamond;
  display: inline;
}

#SubTitle {
  color: maroon;
  font-family: Garamond;
  line-height: 23px;
  font-size: 20px;
}

.content {
  min-height: calc(100vh - 110px);
  /* 80px header + 40px footer = 110px  */
}

footer {
  text-align: center;
  color: gold;
  height: 30px;
}

<header>
  <!-- Stays at the top of the webpage and doesn't move down when user scrolls-->
  <center>
    <img src="#" style="float:center" align="center" />
    <br/>
    <h3 id="Title"> Brittany J. Alexander</h3>
    <h5 id="SubTitle"> Photography</h5>
  </center>


  <div class="navbar">

    <div class="navbaroption1">
      <b><i><a>About Me</a></i></b>

      <div class="navbaro1dropdown">
        <ul>

          <a href="#">Bio</a>
          <a href="#">Instagram</a>
        </ul>
      </div>
    </div>

    <div class="navbaroption2 active">
      <b><i><a autofocus>Locations</a></i></b>

      <div class="navbaro2dropdown">
        <ul>
          <li><a>USA</a></li>
          <ul>
            <li><a href="#">Florida</a></li>
            <li><a href="#">Pennsylvania</a></li>
            <li><a href="#">Michigan</a></li>
          </ul>

          <li>
            <a>Europe</a>

            <ul>
              <li><a href="#">Spain</a></li>
              <li><a href="#">Germany</a></li>
              <li><a href="#">Portugal</a></li>
            </ul>
          </li>

          <li>
            <a>Asia</a>

            <ul>
              <li><a href="#">China</a></li>
              <li><a href="#">Japan</a></li>
              <li><a href="#">India</a></li>
            </ul>
          </li>

          <li>
            <a>Africa</a>

            <ul>
              <li><a href="#">Tunisia</a></li>
              <li><a href="#">Egypt</a></li>
            </ul>
          </li>

          <li><a href="#">Mexico</a></li>
          <li><a href="#">Brazil</a></li>

        </ul>
      </div>
    </div>

    <div class="navbaroption3">
      <b><i><a>Let's talk</a></i></b>

      <div class="navbaro3dropdown">
        <ul>
          <li><a href="#">Email</a></li>
          <li><a href="#">Phone</a></li>
        </ul>
      </div>
    </div>
  </div>

</header>

<main>
  <div class="content">

  </div>
</main>

<footer>
  <h4>@ Brittany's Badass Collection</h4>
</footer>