如何使用CSS调整子下拉菜单的高度

Question

我是新手，慢慢地自学。。。我想试着写一个下拉菜单，但我注意到我的子菜单在第一个孩子身上有额外的高度。我试过在一些地方调整填充、边距，比如菜单栏、主下拉菜单；但老实说我迷路了。我越是尝试、阅读和研究，就越是迷失方向。我认为我以前的编码像父代码一样阻碍了我，但我就是不太明白。我认为这也是一个简单的解决方案。有人想解释我做错了什么吗？非常感谢。。。

我的CSS

.body {
padding: 0;
margin: 0;
background: #91A3BD;
background-size: cover;
background-position: center;
box-sizing: border-box;
font-family: abel;
}

.menu-bar {
background: #1D3860;
height: 100%;
width: 100%;
text-align: center;
font-family: abel;
font-style: normal;
font-size: x-large;
font-weight: 400;
}

.menu-bar ul {
display: flex;
align-items: stretch;
justify-content: space-between;
width: auto;
height: auto;
margin-left: 50px;
margin-right: 90px;
list-style: none;
color: #91A3BD;
padding-top: 18px;
padding-right: 0px;
}

.menu-bar ul li {
display: block;
list-style-type: none;
color: #91A3BD;
white-space:nowrap;
}

.menu-bar ul li a {
text-decoration: none;
color: #91A3BD;
white-space:nowrap;
}
.current, .menu-bar ul li a:hover {
text-decoration: underline;
white-space:nowrap;
}

.sub-menu1 {
display: none;
}

.menu-bar ul li:hover .sub-menu1 {
display: block;
position: absolute;
background: #1D3860;
white-space:nowrap;
}

.menu-bar ul li:hover .sub-menu1 ul {
display: block;
margin-top: auto;
margin-right: auto;
margin-left: -40px;
margin-bottom: auto;
white-space: nowrap;
}
.menu-bar ul li:hover .sub-menu1 ul li {
width: auto;
padding: 10px;
border-bottom: 1px solid #fff;
background: transparent;
border-radius: 0;
text-align: left;
white-space:nowrap;
}

.menu-bar ul li:hover .sub-menu1 ul li:last-child {
border-bottom: none;
}

.sub-menu2 {
display: none;
}

.menu-bar ul li:hover .sub-menu1 ul li:hover .sub-menu2 {
display: block;
position: absolute;
margin-top: none;
margin-left: 146px;
margin-top: -59px;
background: #1D3860;
white-space: nowrap;


.menu-bar ul li:hover .sub-menu1 ul li:hover .sub-menu2 ul {
display: block;
height: auto;
margin-right: auto;
margin-bottom: auto;
white-space:nowrap;
}   

.menu-bar ul li:hover .sub-menu1 ul li:hover .sub-menu2 ul li {
height: auto;
width: auto;
margin-top: 0px;
border-bottom: 1px solid #fff;
background: transparent;
border-radius: 0;
text-align: left;
white-space: nowrap;
}

.menu-bar ul li:hover .sub-menu1 ul li:hover .sub-menu2 ul li:last-child {
border-bottom: none;
}   

我的HTML

<li class="current"><a href="#">Home</a></li>
<li><a href="#">Über Uns</a></li>
<li><a href="#">Leonberger</a>
<div class="sub-menu1">
<ul><li><a href="#">Hündinnen</a></li>        
<li><a href="#">Welpen</a>
<div class="sub-menu2">
<ul><li><a href="#">Würfe A</a></li>
</ul></div></li>
<li><a href="#">Notvermittlung</a></li>
</ul></div></li>
<li><a href="#">Golden Retriever</a>
<div class="sub-menu1">
<ul><li><a href="#">Hündinnen</a></li>
<li><a href="#">Rüde</a></li> 
<li><a href="#">Welpen</a>
<div class="sub-menu2">
<ul><li><a href="#">Würfe A</a></li>
<li><a href="#">Würfe B</a></li>
<li><a href="#">Würfe C</a></li>
</ul></div></li>
<li><a href="#">Notvermittlung</a></li>
</ul></div></li>
<li><a href="#">Welpen</a>
<div class="sub-menu1">
<ul><li><a href="#">vor dem Kauf</a></li>
<li><a href="#">Welpen Infos</a></li> 
<li><a href="#">Garantie</a></li>
<li><a href="#">Kosten</a></li>
</ul></div></li>
<li><a href="#">Services</a>
<div class="sub-menu1">
<ul>
<li><a href="#">Welpenschule</a></li>
<li><a href="#">Seminare</a></li>
<li><a href="#">Pension</a></li>
<li><a href="#">empfohlene Bücher</a></li>
<li><a href="#">Hundefutter</a></li>
</ul></div></li>
<li><a href="#">Kontakt</a></li>
</ul></div>``` 

[1]: https://i.stack.imgur.com/gQgPP.jpg

Answer 1

使用全局Selector *，我消除了额外的边距和填充，这是导致代码问题的原因之一。

然后我给出了子菜单1和个子菜单2position : absolute。

我把他们的位置从上到右、从左调整了一下。通过查看代码，您可以很容易地看到更改。

当然，此菜单没有响应，请在全屏模式下进行测试

* {
padding: 0;
margin: 0;
}
.body {
padding: 0;
margin: 0;
background: #91A3BD;
background-size: cover;
background-position: center;
box-sizing: border-box;
font-family: abel;
}
.menu-bar {
background: #1D3860;
text-align: center;
font-family: abel;
font-style: normal;
font-size: x-large;
font-weight: 400;
}
.menu-bar ul {
justify-content: space-between;
width: 100%;
list-style: none;
color: #91A3BD;
}
.menu-bar ul li {
display: inline-block;
list-style-type: none;
color: #91A3BD;
white-space: nowrap;
padding: 18px 10px;
position: relative;
}
.menu-bar ul li a {
text-decoration: none;
color: #fff;
white-space: nowrap;
}
.current,
.menu-bar ul li a:hover {
text-decoration: underline;
white-space: nowrap;
}
.sub-menu1 {
border-top: 1px solid #dd3322;
position: absolute;
top: -1000px;
}
.menu-bar ul li .sub-menu1 ul li {
display: block;
}
.menu-bar ul li:hover .sub-menu1 {
display: block;
background: #1D3860;
white-space: nowrap;
top: 62px;
}
.menu-bar ul li:hover .sub-menu1 ul {
display: block;
white-space: nowrap;
width: 100%;
left: 0;
}
.menu-bar ul li:hover .sub-menu1 ul li {
padding: 10px;
border-bottom: 1px solid #fff;
background: transparent;
border-radius: 0;
text-align: left;
white-space: nowrap;
}
.menu-bar ul li:hover .sub-menu1 ul li:last-child {
border-bottom: none;
}
.sub-menu2 {
border-top: 1px solid #dd3322;
display: block;
position: absolute;
width: 150px;
top: -1000px;
}
.menu-bar ul li .sub-menu1 ul li .sub-menu2 ul li {
display: block;
}
.sub-menu1 ul li:hover .sub-menu2 {
background: #1D3860;
white-space: nowrap;
top: 0px;
right: -150px
}
.sub-menu1 ul li:hover .sub-menu2 ul li {
padding: 10px;
border-bottom: 1px solid #fff;
background: transparent;
border-radius: 0;
text-align: left;
white-space: nowrap;
display: block;
white-space: nowrap;
width: 100%;
left: 0;
}
.sub-menu1 ul li:hover .sub-menu2 ul li:last-child {
border-bottom: none;
}

<div class="menu-bar">
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Über Uns</a></li>
<li><a href="#">Leonberger</a>
<div class="sub-menu1">
<ul>
<li><a href="#">Hündinnen</a></li>
<li><a href="#">Welpen</a>
<div class="sub-menu2">
<ul>
<li><a href="#">Würfe A</a></li>
</ul>
</div>
</li>
<li><a href="#">Notvermittlung</a></li>
</ul>
</div>
</li>
<li><a href="#">Golden Retriever</a>
<div class="sub-menu1">
<ul>
<li><a href="#">Hündinnen</a></li>
<li><a href="#">Rüde</a></li>
<li><a href="#">Welpen</a>
<div class="sub-menu2">
<ul>
<li><a href="#">Würfe A</a></li>
<li><a href="#">Würfe B</a></li>
<li><a href="#">Würfe C</a></li>
</ul>
</div>
</li>
<li><a href="#">Notvermittlung</a></li>
</ul>
</div>
</li>
<li><a href="#">Welpen</a>
<div class="sub-menu1">
<ul>
<li><a href="#">vor dem Kauf</a></li>
<li><a href="#">Welpen Infos</a></li>
<li><a href="#">Garantie</a></li>
<li><a href="#">Kosten</a></li>
</ul>
</div>
</li>
<li><a href="#">Services</a>
<div class="sub-menu1">
<ul>
<li><a href="#">Welpenschule</a></li>
<li><a href="#">Seminare</a></li>
<li><a href="#">Pension</a></li>
<li><a href="#">empfohlene Bücher</a></li>
<li><a href="#">Hundefutter</a></li>
</ul>
</div>
</li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>