列表项没有调整到菜单底部

我已经创建了一个嵌套列表菜单。问题是，当我添加第二个嵌套列表时，第一组列表元素中的最后一个li元素不会调整它从页面顶部的高度来考虑第二个ul('.sub-2')的高度。它看起来在左边，但不在ul下面。如何让最后一个链接('.last-link')占到第二个ul的高度，使其显示在ul下方?

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

$('#submen-2').on('click', function() {
if ($('.sub-2').hasClass("active")) {
$('.sub-2').removeClass("active");
} else {
$('.sub-2').addClass("active");
}
})
});

* {
box-sizing: border-box;
}
body {
height: 100vh;
}
nav {
height: 10vh;
}
ul {
list-style-type: none;
}
.sub-1 {
height: 0px;
visibility: hidden;
}
.sub-2 {
height: 0px;
visibility: hidden;
}
.active {
height: 55px;
visibility: visible;
}
.height {
display: block;
position: relative;
top: 55.5px;
}

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

设置高度为55px限制了第二个子层次，而没有考虑到第三个子菜单的另一个55px。不要设置高度为55px，设置为auto.

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

$('#submen-2').on('click', function() {
if ($('.sub-2').hasClass("active")) {
$('.sub-2').removeClass("active");
} else {
$('.sub-2').addClass("active");
}
})
});

* {
box-sizing: border-box;
}
body {
height: 100vh;
}
nav {
height: 10vh;
}
ul {
list-style-type: none;
}
.sub-1 {
height: 0px;
visibility: hidden;
}
.sub-2 {
height: 0px;
visibility: hidden;
}
.active {
height: auto;
visibility: visible;
}
.height {
display: block;
position: relative;
top: 55.5px;
}

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

相关内容

最新更新

热门标签：