Question

我想创建一个ul li菜单，我想将每个li元素放在上一个上面。

我不知道我是否可以用文字解释我的意思，所以我做了一个显示所需效果的图像： image http://oi45.tinypic.com/2q07p1k.jpg

如何使用纯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>

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   
}

强加ul li菜单项

2 个答案: