我有一个导航栏。
导航栏具有多级下拉列表。一切似乎都很好，但是在设置了 5 个像素的边框后，我意识到我的定位有误……因为我没有得到预期的结果。
这是导航栏在我的屏幕上的显示方式：
列表显示不均匀已经很明显了。
第三级的列表一般会在错误的地方打开...
为了让它看起来像我需要的那样，我用了一个拐杖：
/* Меню третьего уровня (модификатор, который открывает меню вправо) */
.sub-nav-list-right {
left: 100%;
top: -1px;
}
这是没有这个拐杖的打开方式（我相信女人）：
这个问题可以解决：设置正确的填充，它应该是，但我想弄清楚定位......我定位错了什么？
导航栏的各个部分应如何打开：
代码如下。
* {
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>
如果您完全删除边框，则不需要缩进 - 一切都会顺利。但是如果边界是必要的，那么它们将被考虑在内并按指定的数量缩进：