0

メニューを作成したいのですが、ul li各 li 要素を前の要素の上に配置したいと考えています。

言いたいことを言葉で説明できるかどうかわからないので、望ましい効果を示す画像を作成しました。 画像

プレーンCSSを使用してこれを行うにはどうすればよいですか? 可能ですか、それとも JavaScript を使用する必要がありますか?

これは私がこれまでに試したことです：

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    position: relative;
}

li a {
    display: block;
    position: absolute;
    top: -30px;
    z-index: 1;
    width: 225px;
    height: 115px;
}

しかし、それぞれliが前のものと同じ場所に表示されます。

4

2 に答える 2

4

負の margin-top を使用して、li 要素を「持ち上げる」ことができます。

http://jsfiddle.net/tomprogramming/mbe9W/

関連CSS

li { padding:10px; border:1px solid #000; margin-top:-10px; }
li:first-of-type {
 margin-top:0;   
}
​
于 2012-12-13T20:50:37.650 に答える
1

これは近いと思います：

​<ul>
<li><a class="a" href="#">A</a></li>
<li><a class="b" href="#">B</a></li>
<li><a class="c" href="#">C</a></li>
</ul>

</p>

CSS:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-top:30px;
}

li {
    position: relative;
    height:50px;
}

li a {
    display: block;
    position: absolute;
    height:20px;
    top: -30px;
    left:0;
    width:225px;
    height:115px;

}

.a {
     border:1px solid #ff0000   
}
.b {
     border:1px solid #00ff00  
}

.c {
     border:1px solid #ffff00   
}
​
于 2012-12-13T20:55:21.173 に答える