0

There seems to be an issue with my dropdown class and li class formatting (specifically padding/margins) not interacting as expected. The two-page selections with dropdown menus are getting extra padding from somewhere when I add left margins in the li CSS. while trying to fix that issue I also discovered that the padding between the nav text (in li a) isn't acting right either. I'm not sure where to go from here as I'd like to add a logo to the left side of the nav but can't move the nav text around properly.

The StackOverflow built-in HTML CSS console runs it weird, so here's the CodePen link

/* Nav Bar and Logo*/


/* Logo */

.logo {
  position: absolute;
  margin: 20px 0px 0px 0px;
}


/* nav-bar color and placement*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #0d0d0d;
  font-family: Verdana;
}


/* nav text side alighnment*/

li {
  float: left;
  margin-left: 100px;
}


/* nav text formating*/

li a {
  display: block;
  color: #98c94f;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
}


/* Hovering on nav */

li a:hover:not(.active),
.dropdown:hover {
  background-color: #2a3b12;
  transition: 0.5s;
}


/* Current page your in*/

.active {
  background-color: #8bc33c;
  color: black;
  font-style: italic;
  padding: 19px 39px;
  font-size: 18px;
}


/* Far-side button*/

.booking {
  background-color: #3231ab;
  color: #f4f9ec;
}


/* drop-down text alighnment*/

.dropdown {
  float: left;
  overflow: hidden;
}


/* drop-down box format*/

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #d1e7b1;
  min-width: 160px;
  /* drop-down box shadow*/
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  /* drop box postion (directly under nav) */
  top: 67.5px;
}


/* drop-down text format*/

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* drop-down hover color*/

.dropdown-content a:hover {
  background-color: #bbdb8a;
  transition: 0.3s;
}


/* actavates drop-down when hovering */

.dropdown:hover .dropdown-content {
  display: block;
}
<ul>

  <div class="logo">
    <a herf="#"><img src="DJ_Turntable_LOGO_3.png"></a>
  </div>

  <li class="Home"><a class="active" href="Index.html">Home</a></li>

  <div class="dropdown">
    <li class="About"><a href="About.html">About</a></li>
    <div class="dropdown-content">
      <a href="About-MyStory.html">My Story</a>
    </div>
  </div>

  <li class="Packages"><a href="Packages.html">Packages</a></li>

  <div class="dropdown">
    <li class="Events"><a href="Events.html">Events</a></li>
    <div class="dropdown-content">
      <a href="Events-Weddings.html">Weddings</a>
      <a href="Events-SchoolCelebrations.html">School Celebrations</a>
      <a href="Events-CorporateEvents.html">Corporate Events</a>
      <a href="Events-SpecialOccasions.html">Special Occasions</a>
    </div>
  </div>

  <li class="Reviews"><a href="Reviews.html">Reviews </a></li>

  <li class="Gallery"><a href="Gallery.html">Gallery </a></li>

  <li class="Resourses"><a href="Resourses.html">Resourses </a></li>

  <li class="Contact"><a href="Contact.html">Contact </a></li>

  <li style="float:right"><a class="booking" href="https:">Book Now!</a></li>

</ul>
Lin Du
  • 88,126
  • 95
  • 281
  • 483
Nina Paquette
  • 1
  • 1
    What does "not right" mean? How is this supposed to look &/or act? – Paulie_D Apr 24 '19 at 14:42
  • The "About" "Events" selections with dropdown menus are getting extra padding from somewhere when I add left margins in the li css, this can be seen when hovering over them, the green hover color isn't centered around the text, its to the left with extra space and when you hover over it you can see there are extra boxes/extensions to it. – Nina Paquette Apr 24 '19 at 14:48
  • I'd suggest that the 100px margin you have on **all** `li` is probably a good place to start. – Paulie_D Apr 24 '19 at 14:49
  • 1
    Also, yout HTML is invalid. `li` cannot be **direct** children of a div. It needs to be a `ul` instead. Equally, `div` cannot be children of a `ul`. You need to rethink your HTML from the ground up. – Paulie_D Apr 24 '19 at 14:55
  • https://stackoverflow.com/questions/9100344/pure-css-multi-level-drop-down-menu – Paulie_D Apr 24 '19 at 14:58

0 Answers0