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

Question

在下面的代码片段中，我有一个使用嵌套列表的 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>

Answer 1

我希望你的问题在下面 fiddle 中得到解决。试试吧。

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

Answer 2

子菜单使用绝对位置完全不用担心。只是让 parent 成为亲戚。根据你的代码

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
}

Answer 3

为此，您需要了解 position 的概念...将 position:absolute 用于 drop-menu 和 position:relative 为其父级 li...无需为每个 drop-menu

编写 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>

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

CSS Nested List Affecting Parent Height

html

css

submenu

drop-down-menu