Question

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

我知道我可以使用absolute的位置，但这会导致嵌套列表不能位于其父元素下面的问题，并使每个嵌套的样式令人难以置信的烦恼我可能想要的列表。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我希望你的问题能在下面提到。试试吧。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

为此，您需要了解 position 的概念...使用position:absolute作为下拉菜单，position:relative作为其父li 1}} ...无需为每个下拉菜单编写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>

Answer 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
}

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

3 个答案: