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

Question

我有一个背景图像，我想将其放置在我的 ul li 项目的边缘。

图片

我想你可以看到我正在尝试做的事情，将那个小右箭头定位在 egde 之外，类似于顶部向下的箭头。（石灰将更改为与箭头相同的颜色，但我已经设置了对比色，因此实际上可以看到箭头）

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