css - 将背景图像放置在 ul/li 元素的边缘之外

Question

我有一张背景图片，我想将它放在我的 ul li 元素的边缘。

图片

我想您可以看到我正在尝试做的事情，将那个向右的小箭头放在 egde 之外，类似于顶部向下指向的箭头。 (石灰将更改为与箭头相同的颜色，但在 mo 处我添加了对比色以便实际可以看到箭头)

CSS

body ul#main_navigation li li:hover > a, body ul#main_navigation li li.over > a
{
     background-image:url(/images/nav_arrow_right.png);
     background-repeat:no-repeat;
     background-position:center right;
     background-color: #0F0;
     color: #FFF;
}

想要的结果

编辑:我已经设法让箭头正确定位，但是它被切断了......我怎样才能让它不切断元素之外的任何东西？

Answer 1

@Francesca 所以你可以玩定位你可以设置 background-position你想要箭头图像去哪里......

我在下面给你一些粗略的想法我没有你的代码....

body ul#main_navigation li li:hover > a, body ul#main_navigation li li.over > a
{
     background-image:url(/images/nav_arrow_right.png);
     background-repeat:no-repeat;
     background-position:center 10px;
     background-color: #0F0;
     color: #FFF;
}