positioning - 强加 ul li 菜单项

Question

我想制作一个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出现在与前一个相同的位置。

Answer 1

您可以使用负边距顶部来“提升” li 元素。

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

相关的 CSS

li { padding:10px; border:1px solid #000; margin-top:-10px; }
li:first-of-type {
 margin-top:0;   
}
​

Answer 2

我认为这很接近：

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