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

Question

I am new and teaching myself slowly...I wanted to try to write a dropdown menu, but I noticed my submenu has extra height on the first child. I have tried adjusting padding, margin, in a few places like with the menu bar, the main drop down; but honestly am lost. The more I try, read, and research the more lost I get. I think my previous coding like a parent code is blocking me, but I just can't quite figure it out. I think it is an easy fix too. Anyone want to explain what I did wrong? Greatly appreciated...

My 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;
}   

My 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

With Global Selector * I eliminate extra margin and padding which was one of the reasons for your code problem.

Then I gave sub-menu1 and sub-menu2 position : absolute .

And I adjusted their position from top to right and left. You can easily see the changes by looking at the code.

Of course, this menu is not responsive and test it in full screen mode.

 * { 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>