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

Question

Please can someone help, I've been at this for 2 days and just can't get it right! I'm trying to create a dropdown menu to adhere to my existing navbar. Here's my code below. I have it set that the navbar style changes for smaller windows/mobile and still need to figure that part out wrt the sub menu.. HELP :(

 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

Add this to your css.

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

All you needed to do was target the li inside the li .