1

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

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

1 回答 1

0

您已标记为#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是预期的结果吗？

于 2013-06-07T08:33:51.333 回答