如何将一个列表倒置在另一个列表下方，以便在下拉列表中另一个列表保持在下方位置而不是 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/