影响父级高度的 CSS 嵌套列表答案

【问题标题】：CSS Nested List Affecting Parent Height影响父级高度的 CSS 嵌套列表
【发布时间】：2018-03-23 18:32:10
【问题描述】：

在下面的 sn-p 中，我有一个使用嵌套列表的 CSS 菜单。我遇到的一个问题是，当您将鼠标悬停在第二个列表项上时，它会显示嵌套列表，但在此过程中，会增加父列表的高度，将其他所有内容向下推。

我知道我可以使用absolute 的位置，但这会导致嵌套列表不在其父元素下方的问题，并且让我可能想要的每个嵌套列表的样式都非常烦人。

有没有一种简单的方法可以解决我的问题，同时保持嵌套循环位于其父级下方（并且通过扩展，可以使用:hover 进行访问）

* {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style-type: none;
  background: #000;
  text-align: center;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: inline-block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: #3ab795;
  text-decoration: underline;
}
nav ul li > ul {
  display: none;
  position: relative;
  left: 50px;
  border: 1px solid #fff;
}
nav ul li > ul li {
  display: block;
  color: #fff;
}
nav ul li:hover > ul {
  display: block;
}

<nav>
  <ul>
    <li><a href="#">Item-1</a></li>
    <li><a href="#">Item-2</a>
      <ul>
        <li><a href="#">Item-2A</a></li>
        <li><a href="#">Item-2B</a></li>
        <li><a href="#">Item-2C</a></li>
        <li><a href="#">Item-2D</a></li>
      </ul>
    </li>
    <li><a href="#">Item-3</a></li>
    <li><a href="#">Item-4</a></li>
  </ul>
</nav>

【问题讨论】：

标签： html css drop-down-menu submenu

【解决方案1】：

我希望您的问题在下面的小提琴中得到解决。试试看。

* {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style-type: none;
  background: #000;
  text-align: center;
}
nav ul li {
  display: inline-block;
  position: relative;
  
}
nav ul li a {
  display: inline-block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: #3ab795;
  text-decoration: underline;
}
nav ul li > ul {
  display: none;
  position: absolute;
  left: 50px;
  top:100%;
  border: 1px solid #fff;
}
nav ul li > ul li {
  display: block;
  color: #fff;
}
nav ul li:hover > ul {
  display: block;
}

<nav>
  <ul>
    <li><a href="#">Item-1</a></li>
    <li><a href="#">Item-2</a>
      <ul>
        <li><a href="#">Item-2A</a></li>
        <li><a href="#">Item-2B</a></li>
        <li><a href="#">Item-2C</a></li>
        <li><a href="#">Item-2D</a></li>
      </ul>
    </li>
    <li><a href="#">Item-3</a></li>
    <li><a href="#">Item-4</a></li>
  </ul>
</nav>

【讨论】：

这很好用，但我确实需要将width: max-content 添加到nav ul li > ul li（这不是问题）
干杯@Spedwards

【解决方案2】：

为此，您需要了解position的概念...使用position:absolute 作为下拉菜单，position:relative 作为其父级li...不需要为每个下拉菜单编写 css

* {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style-type: none;
  background: #000;
  text-align: center;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul li a {
  display: inline-block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #3ab795;
  text-decoration: underline;
}

nav ul li>ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0px;
  border: 1px solid #fff;
  min-width: 150px;
}

nav ul li>ul li {
  display: block;
  color: #fff;
}

nav ul li:hover>ul {
  display: block;
}

<nav>
  <ul>
    <li><a href="#">Item-1</a></li>
    <li><a href="#">Item-2</a>
      <ul>
        <li><a href="#">Item-2A</a></li>
        <li><a href="#">Item-2B</a></li>
        <li><a href="#">Item-2C</a></li>
        <li><a href="#">Item-2D</a></li>
      </ul>
    </li>
    <li><a href="#">Item-3</a>
      <ul>
        <li><a href="#">Item-3A</a></li>
        <li><a href="#">Item-3B</a></li>
        <li><a href="#">Item-3C</a></li>
        <li><a href="#">Item-3D</a></li>
      </ul>
    </li>
    <li><a href="#">Item-4</a></li>
  </ul>
</nav>

【讨论】：

相信我，我曾经了解定位。自从我不得不做任何定位的事情以来，已经有大约 3 年了。不过谢谢！

【解决方案3】：

对于子菜单使用绝对位置没有什么好担心的。只是让父母成为亲戚。根据你的代码

nav ul li {
    display: inline-block;
    position: relative; // Added
}

而不是像这样修改嵌套的ul

nav ul li > ul {
    display: none;
    position: absolute; // Added
    left: 0; // Changed
    border: 1px solid #fff;
    width: 160px; // Change as per your requirement
}

【讨论】：