调整下拉指示器图像的位置

Question

我正在尝试在具有子菜单的菜单项上添加一个下拉箭头，并希望调整图像的位置，使其直接位于菜单链接下方并居中。如何调整图像的位置？

这是我目前的 CSS：

nav li.hasChild:after {
    content: url(../images/layout/dropdownOver.png);
}

这会将图像直接添加到菜单项的右侧，但我不确定如何重新定位它。

谢谢！

Answer 1

我想出了两种不同的方法。

第一个很像你的，直接使用 content: url(path_to_image)：JS Bin

这是通过在两个.menu-item中添加display: block;来完成的，并且它:after，导致"换行符"。 text-align: center;注意使图像居中，因为它display属性默认设置为 inline 。

另一个有点不同：JS Bin

概念是相同的，但现在我们使用箭头图像作为:after的background而不是content。我确实生成了更多的代码，但在定位伪元素时为您提供了更大的灵活性。

Answer 2

改用这个css：

nav li.hasChild:after {
    content: url(../images/layout/dropdownOver.png);
    display: block;
    margin-left: -10px;
}

或者你可以使用这个：

nav li.hasChild {
    background-image: url(../images/layout/dropdownOver.png);
    background-repeat: no-repeat;
    background-position: right;
}

然后在图像中，您需要在边缘周围放置一个透明边框