本文针对CSS嵌套列表菜单中，当二级子菜单展开时，底部元素位置未正确调整的问题，提供了一种解决方案。通过将子菜单的固定高度设置为 auto，使其能够根据内容自动调整高度，从而解决底部元素位置不正确的问题。本文将详细介绍该解决方案的实现方法，并提供相应的代码示例。
问题分析
在构建嵌套列表菜单时，通常会使用 CSS 来控制子菜单的显示和隐藏。一种常见的做法是，初始状态下将子菜单的高度设置为 0，visibility 设置为 hidden，当点击父菜单项时，通过 JavaScript 切换子菜单的 active 类，将高度设置为一个固定值（例如 55px），visibility 设置为 visible，从而实现子菜单的展开和收起效果。
然而，当存在多级嵌套的子菜单时，如果内层子菜单的高度超过了外层子菜单的固定高度，就会导致底部元素的位置计算错误，无法正确显示在最底部。这是因为外层子菜单的高度被限制为一个固定值，无法根据内层子菜单的高度自动调整。
解决方案
解决此问题的关键在于，避免为子菜单设置固定的高度值，而是让其根据内容自动调整高度。具体来说，可以将 CSS 中 active 类的 height 属性设置为 auto。
立即学习“前端免费学习笔记（深入）”；
修改后的 CSS 代码如下：
.active {
height: auto;
visibility: visible;
}通过将 height 设置为 auto，子菜单的高度将根据其内容自动调整，从而确保底部元素能够正确显示在最底部。
完整代码示例
以下是包含完整 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");
});
});注意事项：
- 确保在 CSS 中为子菜单设置 overflow: hidden，以便在初始状态下隐藏内容。
- 根据实际布局需求，调整子菜单的 position 属性（例如 absolute 或 relative）。
- 可以根据需要添加其他 CSS 样式，例如背景颜色、边框、内边距等，以美化菜单的外观。
总结
通过将 CSS 中子菜单的 height 属性设置为 auto，可以有效地解决嵌套列表菜单中底部元素位置错误的问题。这种方法简单易懂，并且能够适应各种复杂的菜单结构。在实际开发中，可以根据具体需求进行适当的调整和优化，以实现最佳的显示效果。
