Заполнение навигационной панели и поля не реагируют должным образом - PullRequest
Новая
       3

Заполнение навигационной панели и поля не реагируют должным образом

0 голосов
/ 24 апреля 2019

Кажется, есть проблема с моим выпадающим классом и форматированием класса li (особенно padding / margins), не взаимодействующим должным образом.Выбор из двух страниц с выпадающими меню получает дополнительное заполнение, когда я добавляю левые поля в li CSS.пытаясь исправить эту проблему, я также обнаружил, что заполнение между навигационным текстом (в li) также не работает правильно.Я не уверен, куда идти дальше, поскольку я хотел бы добавить логотип в левую часть панели навигации, но не могу правильно перемещать текст навигации.

Встроенный HTML-код StackOverflow HTML CSSконсоль работает странно, так вот ссылка CodePen 

/* 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>
...