У меня есть навбар.
В навбаре есть многоуровневые раскрывающиеся списки. Вроде все хорошо, но выставив границу в 5 пикселей я понял, что я что-то не так позиционирую... ибо я получил не то, что ожидаю.
Так навбар отображается у меня на экране:
Уже сразу заметно, что отображаются списки не ровно.
Список третьего уровня вообще открывается не там где нужно...
Для того, чтобы это выглядело +- как мне надо, использовал костыль:
/* Меню третьего уровня (модификатор, который открывает меню вправо) */
.sub-nav-list-right {
left: 100%;
top: -1px;
}
Вот как открывается без этого костыля (ховерюсь на woman):
Эту проблему можно исправить: выставить нужные отступы, и будет как надо, но я хочу разобраться с позиционированием... что я позиционирую не так?
То, как разделы навбара должны открываться:
Код ниже.
* {
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>
<footer>
- щас поправлю) перепутал теги