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

编程问答 2022-09-01

问题描述

我是新手，正在慢慢自学……我想尝试编写一个下拉菜单，但我注意到我的子菜单在第一个孩子上有额外的高度。我试过在菜单栏、主下拉菜单等几个地方调整内边距、边距；但老实说我迷路了。我越是尝试、阅读和研究，我就越迷失。我认为我以前的编码像父代码一样阻碍了我，但我无法弄清楚。我认为这也很容易解决。任何人都想解释我做错了什么？非常感谢...

我的 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

解决方法

使用 Global Selector *，我消除了额外的ma​​rgin 和 padding，这是您的代码问题的原因之一。

然后我给了 sub-menu1 和 sub-menu2 position : 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>

drop-down-menuheightheighthtmlsubmenu