Question

如何在另一个列表下方反转一个列表，以便下拉列表另一个列表保持在位置下方并且不浮动在底部？如何让下拉菜单不改变位置？

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

Answer 1

您已将#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预期的结果吗？

多列表下拉绝对位置相互之间和之下？

1 个答案: