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

【问题标题】：Adjusting the position of a dropdown indicator image调整下拉指示器图像的位置
【发布时间】：2014-01-17 17:28:48
【问题描述】：

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

这是我当前的 CSS：

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

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

谢谢！

【问题讨论】：

【解决方案1】：

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

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

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

另一个有点不同：JS Bin

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

【讨论】：

【解决方案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;
}

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

【讨论】：