CSS Menu Caps

programming web dev
1

Sorry if that title is misleading, it the best I could come up with.

I’m trying to “capped” the ends of a CSS menu with images that are rounded to give the menu a pill look.

Here is the file I’m working on:
www.erikakers.com/menu

The HTML is very basic so far:


<div class="menu">

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
</ul>

</div>

here is the CSS(so far):


.menu{
margin: 0px;
padding: 0px;

}

.menu ul{
background: url(images/menubg.jpg) repeat-x;
height: 39px;
width:auto;
font: bold 13px Verdana, Arial, Helvetica, sans-serif;
padding-top: 11px;
}

.menu ul li{
display: inline;
}

I want to add these images to the end of the menu to cap it:

I have tried creating a class like .left with a background url to the left image and setting a z-index of 5 to be higher but that didn’t work. I checked with a few tutorials online that did something close to what I have but nothing I have tried was able to add the caps to the ends of the menu. Does anyone have any good online resources to help me with this problem or has anyone done anything like this in the past?

Thanks