0

У меня есть навбар.

В навбаре есть многоуровневые раскрывающиеся списки. Вроде все хорошо, но выставив границу в 5 пикселей я понял, что я что-то не так позиционирую... ибо я получил не то, что ожидаю.

Так навбар отображается у меня на экране: Вид навбара у меня на экране

Уже сразу заметно, что отображаются списки не ровно.

Список третьего уровня вообще открывается не там где нужно...

Для того, чтобы это выглядело +- как мне надо, использовал костыль:

/* Меню третьего уровня (модификатор, который открывает меню вправо) */
.sub-nav-list-right {
  left: 100%;
  top: -1px;
}

Вот как открывается без этого костыля (ховерюсь на woman): При ховере на wooman

Эту проблему можно исправить: выставить нужные отступы, и будет как надо, но я хочу разобраться с позиционированием... что я позиционирую не так?

То, как разделы навбара должны открываться: Что я хочу

Код ниже.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.nav-list {
  font-size: 0;
  margin: 15px 30px;
}

.nav-list-item {
  position: relative;
  font-size: 18px;
  display: inline-block;
  border: 10px solid #367452; /* 0.1 */
  background-color: #47986d;
  
  /* !!!!! */
  width: 150px;
  text-align: center;
  color: white;
  text-transform: capitalize;
}

.link {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: inherit;
}

.sub-nav-list {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
}

/* Меню третьего уровня (модификатор, который открывает меню вправо) */
.sub-nav-list-right {
  left: 100%;
  top: -1px;
}

.sub-nav-item {
  display: block;
}

.nav-list-item:hover > .sub-nav-list {
  display: block;
}

.nav-list-item:hover {
  background-color: #3c805b;
}

.main-article {
  margin: 30px;
  font-size: 18px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Главная страница</title>
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>

    <header>
      <nav>

        <ul class="nav-list">
          <li class="nav-list-item">
            <a href="https://youtube.com" target="_blank" class="link">Home</a>
          </li>
          <li class="nav-list-item">
            <a href="#" class="link">Categories</a>
            
            <!-- Drop-down list -->
            <ul class="sub-nav-list">
              <li class="sub-nav-item nav-list-item">
                <a href="#" class="link">Man</a>
              </li>
              <li class="sub-nav-item nav-list-item">
                <a href="#" class="link">Woman</a>
                
                <!-- Drop-down list -->
                <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
                <ul class="sub-nav-list sub-nav-list-right">
                  <li class="sub-nav-item nav-list-item">
                    <a href="#" class="link">Dress</a>
                  </li>
                  <li class="sub-nav-item nav-list-item">
                    <a href="#" class="link">Pants</a>
                  </li>
                  <li class="sub-nav-item nav-list-item">
                    <a href="#" class="link">Shoes</a>
                  </li>
                </ul>
                <!-- END drop-down list -->

              </li>
              <li class="sub-nav-item nav-list-item">
                <a href="#" class="link">kids</a>
              </li>
            </ul>
            <!-- END drop-down list -->

          </li>
          <li class="nav-list-item">
            <a href="#" class="link">About</a>
          </li>
          <li class="nav-list-item">
            <a href="#" class="link">Contacts</a>
          </li>
        </ul>

      </nav>
    </header>
    
    <main>

      <article class="main-article">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis
        aliquam rerum sapiente quas, veniam hic illum qui assumenda numquam magni
        aliquid vitae, asperiores eius nesciunt expedita vero error ducimus enim
        dignissimos ut voluptas esse molestiae ipsum dolores. In delectus ipsa
        possimus. Sequi, tenetur corrupti! Iusto minus cum illum impedit fugiat
        tenetur cupiditate iste veniam natus, aliquid dignissimos consequatur
        magnam voluptate rem enim quisquam nostrum sed! Esse delectus distinctio a
        aliquid libero rem assumenda, error eaque magnam quidem dolorum impedit
        laudantium cupiditate quam! Necessitatibus quibusdam ipsa aspernatur rem
        excepturi delectus voluptatem, quis nihil voluptate harum architecto
        repellat dolorum vero corrupti quam officia similique, sequi sint veniam
        dicta natus amet consequuntur a incidunt? Id ipsam libero minus,
        architecto dolorum harum officiis explicabo ad iure ipsa, possimus
        repellat nisi! Inventore molestiae est magni dolor ut nam sequi quibusdam
        aperiam maiores corporis doloremque beatae ducimus, nihil quam consectetur
        asperiores laudantium maxime vero sit expedita? Architecto eveniet,
        suscipit totam nesciunt tempora voluptatem atque quibusdam vitae est.
        Incidunt quia alias veritatis unde vero vel beatae recusandae ipsum
        aperiam adipisci at officia rerum totam maxime quas et, pariatur aut
        voluptatum, asperiores sit eveniet. Omnis accusamus ad repellendus
        possimus id praesentium sapiente nisi aut exercitationem sequi blanditiis
        itaque repudiandae quidem, ratione quasi dicta in velit ut necessitatibus
        rerum. Corporis aut ut voluptas, doloremque eveniet, repellendus delectus
        iure perspiciatis ratione quos officia illo minus quae expedita quasi
        veritatis quo culpa harum deserunt doloribus fugit dolorem! Repellendus
        sapiente facilis beatae magnam nisi quod voluptate, commodi officia
        recusandae doloremque deserunt provident dicta. Dolores quibusdam magnam
        enim aliquid amet nesciunt, sequi consectetur nihil, ullam aliquam eum?
        Deserunt ipsum necessitatibus cupiditate iure unde similique vero pariatur
        error illo enim dolorem voluptates, expedita, officia facilis quasi
        voluptatibus incidunt. Blanditiis, hic? Possimus exercitationem blanditiis
        fugiat quaerat labore quam consequatur, dolorem ex asperiores odit
        obcaecati maiores laudantium soluta nisi neque alias beatae consectetur
        officia excepturi dignissimos ratione ea assumenda? Fugit minima corporis
        alias tempore reiciendis quas earum, aut necessitatibus voluptatem ipsam
        debitis nemo labore officiis numquam repudiandae recusandae similique,
        totam ipsum maiores perferendis libero. Error vel officia autem vero nihil
        perferendis maiores, laborum maxime quam ab perspiciatis in, ratione
        soluta qui magni quibusdam cumque sed nisi velit rerum ut facilis,
        assumenda odio dolor? Repellat, voluptate non beatae hic expedita amet
        voluptates magni. Placeat nobis laboriosam quas quibusdam odio voluptate
        doloribus doloremque labore repudiandae nulla amet, ipsum eum maxime
        corrupti. Saepe porro nostrum molestiae id alias! Incidunt?
      </article>

    </main>
  </body>
</html>

5
  • .sub-nav-list { left: -10px; } .sub-nav-list-right { top: -10px; } /если я правильно понял, что Вам нужно/ Commented 11 янв. 2022 в 14:54
  • а почему у Вас сверху footer идёт? header же должен быть - footer в подвале Commented 11 янв. 2022 в 14:55
  • @humster_spb, можно попробовать так решить проблему, я не спорю) Но у меня проблема в том, что я что-то позиционирую не так. Если правильно все спозиционировать - не нужно будет задавать отступы, все будет отображаться ровно, так как нужно)
    – dbUser11
    Commented 11 янв. 2022 в 14:58
  • @humster_spb, по поводу <footer> - щас поправлю) перепутал теги
    – dbUser11
    Commented 11 янв. 2022 в 14:59
  • всё Вы правильно позиционируете, но границу в 10px надо принимать во внимание - из-за неё всё съезжает, на эту величину и надо делать отступы Commented 11 янв. 2022 в 15:06

1 ответ 1

1

Если Вы вообще уберёте границы, то тогда отступы будут не нужны - всё будет ровно. Но если границы необходимы, то их придётся учитывать и делать отступы на указанную величину:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.nav-list {
  font-size: 0;
  margin: 15px 30px;
}

.nav-list-item {
  position: relative;
  font-size: 18px;
  display: inline-block;
  /*border: 2px solid #367452;*/ /* 0.1 */
  background-color: #47986d;
  
  /* !!!!! */
  width: 150px;
  text-align: center;
  color: white;
  text-transform: capitalize;
}

.link {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: inherit;
}

.sub-nav-list {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
}

/* Меню третьего уровня (модификатор, который открывает меню вправо) */
.sub-nav-list-right {
  left: 100%;
  top: 0;
}

.sub-nav-item {
  display: block;
}

.nav-list-item:hover > .sub-nav-list {
  display: block;
}

.nav-list-item:hover {
  background-color: #3c805b;
}

.main-article {
  margin: 30px;
  font-size: 18px;
}
    <header>
      <nav>

        <ul class="nav-list">
          <li class="nav-list-item">
            <a href="https://youtube.com" target="_blank" class="link">Home</a>
          </li>
          <li class="nav-list-item">
            <a href="#" class="link">Categories</a>
            
            <!-- Drop-down list -->
            <ul class="sub-nav-list">
              <li class="sub-nav-item nav-list-item">
                <a href="#" class="link">Man</a>
              </li>
              <li class="sub-nav-item nav-list-item">
                <a href="#" class="link">Woman</a>
                
                <!-- Drop-down list -->
                <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
                <ul class="sub-nav-list sub-nav-list-right">
                  <li class="sub-nav-item nav-list-item">
                    <a href="#" class="link">Dress</a>
                  </li>
                  <li class="sub-nav-item nav-list-item">
                    <a href="#" class="link">Pants</a>
                  </li>
                  <li class="sub-nav-item nav-list-item">
                    <a href="#" class="link">Shoes</a>
                  </li>
                </ul>
                <!-- END drop-down list -->

              </li>
              <li class="sub-nav-item nav-list-item">
                <a href="#" class="link">kids</a>
              </li>
            </ul>
            <!-- END drop-down list -->

          </li>
          <li class="nav-list-item">
            <a href="#" class="link">About</a>
          </li>
          <li class="nav-list-item">
            <a href="#" class="link">Contacts</a>
          </li>
        </ul>

      </nav>
    </header>
    
    <main>

      <article class="main-article">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis
        aliquam rerum sapiente quas, veniam hic illum qui assumenda numquam magni
        aliquid vitae, asperiores eius nesciunt expedita vero error ducimus enim
        dignissimos ut voluptas esse molestiae ipsum dolores. In delectus ipsa
        possimus. Sequi, tenetur corrupti! Iusto minus cum illum impedit fugiat
        tenetur cupiditate iste veniam natus, aliquid dignissimos consequatur
        magnam voluptate rem enim quisquam nostrum sed! Esse delectus distinctio a
        aliquid libero rem assumenda, error eaque magnam quidem dolorum impedit
        laudantium cupiditate quam! Necessitatibus quibusdam ipsa aspernatur rem
        excepturi delectus voluptatem, quis nihil voluptate harum architecto
        repellat dolorum vero corrupti quam officia similique, sequi sint veniam
        dicta natus amet consequuntur a incidunt? Id ipsam libero minus,
        architecto dolorum harum officiis explicabo ad iure ipsa, possimus
        repellat nisi! Inventore molestiae est magni dolor ut nam sequi quibusdam
        aperiam maiores corporis doloremque beatae ducimus, nihil quam consectetur
        asperiores laudantium maxime vero sit expedita? Architecto eveniet,
        suscipit totam nesciunt tempora voluptatem atque quibusdam vitae est.
        Incidunt quia alias veritatis unde vero vel beatae recusandae ipsum
        aperiam adipisci at officia rerum totam maxime quas et, pariatur aut
        voluptatum, asperiores sit eveniet. Omnis accusamus ad repellendus
        possimus id praesentium sapiente nisi aut exercitationem sequi blanditiis
        itaque repu

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.