Image inside li element does not appear

Question

I am designing a menu to work with a responsive design website and I want to float a .gif image to the right of an li element. The problem is that my .gif image does not appear after I try modifying my css.

HTML:

 <ul id="nav">
    <li class="first_item_drop"><a class="additional_item">Our Work</a></li>
    <li><a class="additional_item">About Us</a></li>
 </ul>

CSS:

.first_item_drop {border-top:1px solid #A9AFBC; background:url(../images/small_down_arrow.gif) no-repeat 10px right center;}
.additional_item {border-bottom:1px solid #A9AFBC;}

I've tried different approaches but I cannot get the .gif image to appear.

Any help is greatly appreciated!

Answer 1

CSS Backgrounds - 3.10. Backgrounds Shorthand: the ‘background’ property

<bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

Your syntax is invalid.

You need to specify the background-position (right center) before the background-size (10px). Both of which should be separated by a forward slash /.

Therefore, it should be:

background: url(../images/small_down_arrow.gif) right center / 10px no-repeat;

Working Example

Answer 2

Try this:

.first_item_drop {border-top:1px solid #A9AFBC; background:url("../images/small_down_arrow.gif") center right / 10px no-repeat;}
.additional_item {border-bottom:1px solid #A9AFBC;}

JSFIDDLE