可以错开内联菜单吗？

Question

我有一个具有这样的背景的菜单：

我正在使用菜单项的无序列表-主页，产品，特价商品，文章和联系方式，并希望将所有项目显示在相应的选项卡中：

使用CSS，我可以使列表中的第一个项目与其框对齐，但其余的则不行-

#top_menu li {
    display: inline-block;
    padding-right: 44px;
    padding-top: 73px;
}

我尝试将填充物添加到单个项目中，但没有任何运气。

我也尝试为每个项目添加边距顶部（按照这个问题Stagger或Stair-Case a Menu ），但这似乎对我也不起作用。

甚至可以错开这样的锂物品吗？ 还是有更好的方法来做到这一点？

理想情况下，如果可能的话，我想做的就是完全用CSS创建选项卡框效果。 但是，我仍然为交错的布局感到困惑。

任何想法表示赞赏！

Answer 1

确保您的li位置相对。

然后使用top进行样式设置。

看我的代码...

 ul { margin-left: .25em; padding-left: 0; list-style: none; } li { position: relative; margin-left: 0; padding-left: 0; display: inline-block; width: 75px; height: 30px; border: 1px solid red; } li:nth-child(2) { top: 10px; } li:nth-child(3) { top: 20px; } li:nth-child(4) { top: 30px; } li:nth-child(5) { top: 40px; } 

 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

Answer 2

这应该做您想做的事：

 #top_menu { list-style: none; } #top_menu li { float: left; clear: none; position: relative; padding: 2px 6px; margin-right: 2px; background-color: #09f; } #top_menu li a { color: #fff; text-decoration: none; } #top_menu li:nth-child(2) { margin-top: 5px; } #top_menu li:nth-child(3) { margin-top: 10px; } #top_menu li:nth-child(4) { margin-top: 15px; } #top_menu li:nth-child(5) { margin-top: 20px; } 

 <ul id="top_menu"> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> </ul> 

输出：