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: right .

小提琴

Answer 2

尝试添加 li position:relative 和 z-index:0 。对于:hover - z-index:20：

.CSS：

ul li {
   ...
 position:relative;
 z-index:0;
}
ul li:hover { border-bottom: 28px solid #7f7f7f;z-index:1; }

http://jsfiddle.net/ae4j8/8/

我认为会更好