Question

I have a background image that I’d like to position just off the edge of my ul li item.

Image

I guess you can see what I’m trying to do, position that little right pointing arrow off the egde, similar to the one at the top that points downwards. (The lime will be changed for the same colour as the arrow, but at the mo I have put a contrasting colour so the arrow can actually be seen)

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

Desired result

EDIT: I have managed to get the arrow positioned correctly, however it is cutting off… how can I make it not cut off anything that is outside of the item?

Answer 1

@Francesca so you can play with positioning you can set the background-positionwhere do you want the arrow image that will go there…………

I am giving you some rough idea below i don’t have your much code….

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