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 --*/
}

このワーキング JSFiddleは期待される結果ですか?

于 2013-06-07T08:33:51.333 に答える