解决CSS嵌套列表菜单中底部元素位置错误的方案-html教程-PHP中文网

解决CSS嵌套列表菜单中底部元素位置错误的方案

心靈之曲

发布： 2025-09-03 20:38:00

原创

320人浏览过

解决css嵌套列表菜单中底部元素位置错误的方案

本文针对CSS嵌套列表菜单中，当二级子菜单展开时，底部元素位置未正确调整的问题，提供了一种解决方案。通过将子菜单的固定高度设置为 auto，使其能够根据内容自动调整高度，从而解决底部元素位置不正确的问题。本文将详细介绍该解决方案的实现方法，并提供相应的代码示例。

问题分析

在构建嵌套列表菜单时，通常会使用 CSS 来控制子菜单的显示和隐藏。一种常见的做法是，初始状态下将子菜单的高度设置为 0，visibility 设置为 hidden，当点击父菜单项时，通过 JavaScript 切换子菜单的 active 类，将高度设置为一个固定值（例如 55px），visibility 设置为 visible，从而实现子菜单的展开和收起效果。

然而，当存在多级嵌套的子菜单时，如果内层子菜单的高度超过了外层子菜单的固定高度，就会导致底部元素的位置计算错误，无法正确显示在最底部。这是因为外层子菜单的高度被限制为一个固定值，无法根据内层子菜单的高度自动调整。

解决方案

解决此问题的关键在于，避免为子菜单设置固定的高度值，而是让其根据内容自动调整高度。具体来说，可以将 CSS 中 active 类的 height 属性设置为 auto。

立即学习“前端免费学习笔记（深入）”；

修改后的 CSS 代码如下：

.active {
  height: auto;
  visibility: visible;
}

登录后复制

通过将 height 设置为 auto，子菜单的高度将根据其内容自动调整，从而确保底部元素能够正确显示在最底部。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

完整代码示例

以下是包含完整 HTML、CSS 和 JavaScript 代码的示例，展示了如何使用 height: auto 来解决嵌套列表菜单中底部元素位置错误的问题。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Menu</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <a href="#" id="btn"><i class="fa-solid fa-bars"></i></a>

    <ul class="main">
      <li><a href="contact.html">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#" id="submen-1">Sub</a>
        <ul class="sub-1">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#" id="submen-2">Sub-2</a>
            <ul class="sub-2">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#" id="last-link">Last Link</a></li>
    </ul>
  </nav>

  <script src="script.js"></script>
</body>
</html>

登录后复制

CSS (style.css):

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
}

nav {
  height: 10vh;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sub-1 {
  height: 0;
  visibility: hidden;
  overflow: hidden; /* 确保内容隐藏 */
}

.sub-2 {
  height: 0;
  visibility: hidden;
  overflow: hidden; /* 确保内容隐藏 */
}

.active {
  height: auto;
  visibility: visible;
  overflow: visible; /* 确保内容显示 */
}

.height {
  display: block;
  position: relative;
  top: 55.5px;
}

/* 基础样式，可根据需要调整 */
.main > li {
  display: inline-block;
  margin-right: 20px;
}

.sub-1, .sub-2 {
  position: absolute; /* 或者 relative，根据布局需求 */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
}

登录后复制

JavaScript (script.js):

$(document).ready(function() {
  $('#submen-1').on('click', function(e) {
    $('.sub-1').toggleClass("active");
    e.stopPropagation();
  });

  $('#submen-2').on('click', function() {
    $('.sub-2').toggleClass("active");
  });
});

登录后复制

注意事项：