将背景图像放在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;
}