html - CSS - 将自定义选项卡置于最前面

Question

我只使用 HTML 和 CSS 编写自定义选项卡，到目前为止我已经想到了这个:

http://jsfiddle.net/ae4j8/

index.html:

...
<ul>
   <li><a href="#">Products</a></li>
    <li><a href="#">Loans</a></li>
    <li><a href="#">Deals</a></li>
</ul>
...

index.css:

ul { margin-top: 10px;}
ul li {
   border-bottom: 28px solid #3f3f3f;
   border-left: 28px solid transparent;
   border-right: 28px solid transparent;
   height: 0;
   display: inline-block;
   margin: 0 -35px 0 0;
   padding: 0;
}
ul li:hover { border-bottom: 28px solid #7f7f7f; }
ul li a {
    color: #fff;
    display: block;
    float: left;
    margin: 0;
    padding: 5px;
    text-decoration: none;
}

我希望第一个选项卡出现在第二个选项卡的前面，第二个选项卡出现在第三个选项卡的前面。

目前它的第一个标签位于第三个标签后面的第二个标签后面，看起来像最顶层的标签。

关于如何反转标签有什么想法吗？

Answer 1

如前所述，您可以将链接按相反的顺序放置(因此您的“第一个”链接“产品”最后呈现，因此位于其他链接之上。)要使用 CSS 将它们放回原始顺序，您可以使用 float :右。

Fiddle