Блог

Главная - Вопросы по программированию - вложенная панель навигации не выравнивается под основной навигацией

вложенная панель навигации не выравнивается под основной навигацией

#html #css #flexbox #responsive #nav

#HTML #css #flexbox #отзывчивый #навигация

Вопрос:

Здравствуйте, я пытаюсь добавить вложенную навигацию в свою основную навигацию. Проблема в том, что вложенная навигация не выравнивается должным образом под основной навигацией. Пожалуйста, посмотрите на скриншот. Вложенная навигационная панель не выравнивается прямо под основной навигацией. Вложенная навигация сдвинулась примерно на 50% вправо. Я использую css flexbox для компоновки навигации.

введите описание изображения здесь

 body {
  background-color: red; /* to see menu */
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 8rem;
  width: 100%;
  background-color: transparent;
  transition: height 0.5s;
}

.heading a:link,
a:visited {
  font-family: 'Alata', sans-serif;
  font-size: 3rem;
  text-transform: capitalize;
  color: white;
  cursor: pointer;
  display: block;
  position: relative;
  transition: .3s ease;
}

.heading a:hover,
a:active {
  transform: translate(.3rem, -.2rem);
  color: white;
}

.navbar {
  display: flex;
  width: 45%;
  justify-content: space-between;
  list-style-type: none;
  z-index: 1000;
  position: relative;
}

.navbar li {
  position: relative;
  flex: 1 1 auto;
}

.nested {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  position: absolute;
  width: 100%;
}

.nested li {
  width: 100%;
}

.navbar li a:link,
a:visited {
  padding: 5px 0px;
  cursor: pointer;
  color: white;
  display: block;
  transition: .3s;
}

.navbar li a:hover,
a:active {
  transform: scale(1.2);
  color: white;
  background: rgba(0, 0, 0, 0.082);
}

.toggler {
  display: none;
}  
 <div class="nav-wrapper">
  <h1 class="heading"><a href="#">HeaderName</a></h1>
  <div class="toggler">
    <i class="fas fa-bars"></i>
  </div>
  <ul class="navbar">
    <li><a href="#"> Home</a>
      <ul class="nested">
        <li>
          <a href="#"> <i class="fas fa-user-alt"></i> About Us</a>
        </li>
        <li><a href="#"><i class="fas fa-concierge-bell"></i> Services</a></li>
      </ul>
    </li>
    <li>
      <a href="#"> <i class="fas fa-user-alt"></i> About Us</a>
    </li>
    <li><a href="#"><i class="fas fa-concierge-bell"></i> Services</a></li>
    <li><a href="#"><i class="fas fa-briefcase"></i> Portfolio</a></li>
    <li><a href="#"><i class="fa fa-share" aria-hidden="true"></i> Contact</a></li>
  </ul>
</div>

Комментарии:

1. Итак, вы хотите, чтобы вложенная навигация имела ширину 100% под основной навигацией, или в этом случае вы хотите выровнять под Home? Или и то, и другое?

2. здравствуйте, я хочу, чтобы она выровнялась под home и имела ту же ширину, что и основная панель навигации li

3. Пожалуйста, посмотрите на скриншот. вложенная навигация должна быть правильно выровнена под основной навигацией и должна иметь ту же ширину, что и home. это выпадающий список…

4. я думаю, что у вложенной навигации есть некоторые дополнения к ней.

Ответ №1:

Наконец-то понял проблему. во вложенной навигации было заполнение. пришлось добавить свойство padding: 0 в css. Я предлагаю добавить margin: 0 и padding: 0 в ul, li , свойство.