在HTML + CSS中的活动菜单项下添加一个箭头

Question

我正在尝试生成如下菜单：

菜单中有几个项目，活动的项目后面有一个箭头。 菜单项是以下代码的标签：

<div class="menuCenter">
     <div class="linksWrapper">
      <a href="#">Home</a>
      <a class="menuCenterLinkLeft" href="#">Plans & Pricing</a>
      <a class="menuCenterLinkLeft" href="#">Sign In</a>
      <a class="menuCenterLinkLeft active" href="#">Sign Up</a>
      <a class="menuCenterLinkLeft" href="#">Contact</a>
     </div>
</div>

我尝试了两个选项：1-使用javascript绝对定位箭头图像。 调整页面大小时我遇到问题。 2-使用：after伪元素，如下所示：

.linksWrapper a.active:after
{
    content: url("images/arrowImg.png");
    position: relative;
    left: -40px;
    top: 30px; 
}

这种方法的问题是箭头的水平对齐。 它应该低于链接的中心，我无法实现。 我可以使用HTML5或CSS 3。

有帮助吗？

Answer 1

尝试这个：

.linksWrapper a.active:after {
    content: url("images/arrowImg.png");
    position: absolute;
    left: 50%;
    top: 30px;
    margin-left: - <width-of-your-image> / 2; /* negative number!*/
}

旁注：我避免将{放在换行符上，因为它可能会在javascript中产生令人讨厌的效果。

诀窍是left:50%; 结合校正位置，通过margin-left将其设置回半宽。

见例子 。

Answer 2

绝对定位方法应该有效，你需要将箭头放在另一个具有position:relative div中position:relative定义，以便绝对坐标相对于这个父div，而不是相对于body元素。

但是，我会采用这种方法：

使箭头成为实际a.active项目的背景图像的一部分 - 这样它将以background-position中心，您不需要任何脚本！

Answer 3

我把它放在一起真的很快..

http://jsfiddle.net/8Sqwq/1/

因为我不太确定你的代码有多灵活，这是我能想到的最好的。

哪个href的类名为.active将继承箭头

//我更新了小提琴以显示它的实际效果。