html - 我无法让我的导航栏子菜单垂直对齐

Question

请有人帮忙，我已经做了 2 天了，就是做不对!我正在尝试创建一个下拉菜单以符合我现有的导航栏。下面是我的代码。我已将导航栏样式设置为针对较小的窗口/移动设备进行更改，并且仍然需要通过子菜单找出该部分。帮助:(

nav {
  position: fixed;
  width: 100%;
  z-index: 10;
}

nav ul {
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #000;
  padding: 0;
  text-align: center;
  margin: 0;
  transition: 1s;
}

nav ul li {
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;

}

nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 20px;
  padding: 5px 5px;
}

nav ul li ul {
  display: none;
}

nav ul li:hover ul {
  display: block;
  position: absolute;
}

nav.black ul {
  background: rgba(255, 255, 255, 1);
  color: #666;
}
nav.black ul li a {
  text-decoration: none;
  font-size: 20px;
  transition: 1s;
  filter: invert(50%);
}

.menu-icon {
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #00b4ff;
  display: none;
}

@media(max-width: 900px) {
  .nav-logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }

  nav ul {
    max-height: 0px;
    background: #000;
  }

  nav.black ul {
    background: #000;
  }

  .showing {
    max-height: 45em;
  }

  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px 0;
    text-align: center;
  }

  .menu-icon {
    display: block;
  }
}

    <div class="nav-wrapper">
      <nav>
        <div class="menu-icon">
          <i class=" fa fa-bars fa-2x"></i>
        </div>
        <div class="menu">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="courses.html">Courses</a>
              <ul>
                <li><a href="">PADI Experiences</a></li>
                <li><a href="">PADI Basic Courses</a></li>
                <li><a href="">PADI Speciality Courses</a></li>
                <li><a href="">PADI Pro</a></li>
              </ul>
            </li>
            <li class="small-nav-logo"><a id="nav-africa" href ="index.html"><img src="img/logo-icon.gif" alt="Home" width="80" height="68"></a></li>
            <li><a href="dives.html">Dives</a>
              <ul>
                <li><a href="">Guided Packages</a></li>
              </ul>
            </li>
            <li><a href="nature.html">Nature</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </nav>
    </div>

Answer 1

将此添加到您的 CSS。

nav ul li ul li{
  display: block;
  text-align: left;
  margin: 20px 0px;
}

您需要做的就是将 li 内的 li 作为目标。