Question

我只使用HTML和CSS编写自定义标签，到目前为止我已经提出了这个：

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

如上所述，您可以按相反的顺序放置链接（因此您的“第一个”链接'产品'最后呈现，因此在其他链接之上。）要按照原始顺序将它们放回原来的顺序，您可以使用{ {1}}。

Fiddle

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/

我认为会更好

CSS - 将自定义标签置于前面

2 个答案: