css menu that has different images

hello. i am trying to make an horizontal css menu that has 5 intems, and each item has to have a specific image. but all that i have done so har is managed to put an image...that is shown on all of them.
do you have any idea how to do this?
// html code
<div id="navcontainer">
<ul>
<li><a href="#" >item 1</a></li>
<li><a href="#" >item2</a></li>
<li><a href="#" >item3</a></li>
<li><a href="#">item4</a></li>
<li><a href="#" >item5</a></li>
</ul>
</div>
//...

//css code
#navcontainer { margin-left: 0px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li {
margin: 0;
background-repeat: no-repeat;
}

#navcontainer a
{
display: block;
padding: 1px 0px;
width: 180px;
height:40px;
color: #fff;
text-align: center;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: normal;
font-size: 13px;
background-image: url(images/vertical2.jpg) ;
background-repeat: no-repeat;
background-position: 0 0;
}

#navcontainer a:hover
{
color: #000;
background-color: #00CCFF;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical1.jpg);
background-repeat: no-repeat;
background-position: right;
}
//.....

thank you!

you need to add a class or an ID to the links and then style them independently.


#navcontainer a
{
display: block;
padding: 1px 0px;
width: 180px;
height:40px;
color: #fff;
text-align: center;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: normal;
font-size: 13px;
background-repeat: no-repeat;
background-position: top left;
}

#navcontainer a:hover
{
color: #000;
background-color: #00CCFF;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-repeat: no-repeat;
background-position: top right;
}

.link1 {
background-image: url(images/vertical1.jpg) ;
}
.link2 {
background-image: url(images/vertical2.jpg) ;
}
.link3 {
background-image: url(images/vertical3.jpg) ;
}



<div id="navcontainer">
<ul>
<li><a href="#" class="link1">item 1</a></li>
<li><a href="#" class="link2">item2</a></li>
<li><a href="#" class="link3">item3</a></li>
</ul>
</div>


the paositioning and hover effects are controlled by the link style. the lcasses allow you to give each one a different style, in this case a different background image.

Hello mucea,
I've put up an example (http://www.nopeople.com/CSS/menu_buttons/horizontal.html) here if you want to have a look.

That is not what was suggested above; since the images in this case should be considered presentational in nature, including them as content in the document is not the preferred method. It is more appropriate to use CSS background images as HarbingerOTV suggested, which would also make the use of ordinary link text instead of images for text possible.

mucea,

alternatively, you could move the classes/ids up a level to the li elements so you have specific control over each of their properties as well; you'll have to decide whether this is needed.