gpt4 book ai didi

jquery - 多列表下拉绝对位置在彼此之上和之下?

转载 作者:太空宇宙 更新时间:2023-11-03 18:43:34 25 4
gpt4 key购买 nike

如何将一个列表倒置在另一个列表下方,以便在下拉列表中另一个列表保持在下方位置而不是 float 在底部?如何让下拉菜单不改变位置?

<html>
<div id="cat">
<h3>Catagory</h3>
<ul>
<li> <a href="box">design</a></li>
<li><a href="#box2">design</a></li>
<li><a href="#box2">design</a></li>
<ul>
</div>
<div id="cat2">
<h3> catagory </h3>
<ul>
<li><a href="#box2">design</a></li>
<li><a href="#box2">design</a></li>
<li><a href="#box2">design</a></li>
</ul>
</div>
</body>
</html>
<style type="text/css">
.cat{position:relative;
margin: 10px 10px 10px 19px;
padding: 10px;
border: 2px solid black;
width: 200px;
z-index:200;
clear:top;}
.cat > ul { display: none; margin-top:-2px;}
.cat:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid black; height:168px;}
.cat:hover > ul > li { padding: 0; border-bottom: 1px solid #4f4f4f; width:200px; margin-left:-60px; margin-top: 1px;}
.cat:hover > ul > li:hover { background: white;}
.cat:hover > ul > li:hover > a { color: red; }
.cat2{position:absolute;display:block; margin: 10px 10px 10px 19px;
padding: 10px; border: 2px solid black; width: 200px;z-index:100;}

</style>

最佳答案

您已将 #cat2 标记为 position:absolute 但您未分配任何位置。尝试添加这一行:

#cat2 {
position:absolute;
display:block;
margin: 10px 10px 10px 19px;
padding: 10px;
border: 2px solid black;
width: 200px;
z-index:100;
top:100px; /* --This line --*/
}

这是Working JSFiddle吗?预期结果?

关于jquery - 多列表下拉绝对位置在彼此之上和之下?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16979370/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com