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

Question

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

这是我目前的CSS：

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

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

谢谢！

Answer 1

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

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

这是通过在display: block;和.menu-item中添加:after来完成的，从而导致“换行符”。 text-align: center;负责将图像居中，因为display属性默认设置为inline。

另一个有点不同：JS Bin

概念是一样的，但现在我们将箭头图像用作background的{​​{1}}而不是:after。 我确实生成了一些代码，但在定位伪元素时会给你更大的灵活性。

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;
}

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