Problem with CSS - Nav Buttons

[leighchic]

Hi there

I have what seems to be a simple problem, but i am not getting it right and so I thought I would ask.. as would like to know the best solution for this.

This is the site I am building:
http://www.leighdesignstudio.com/itech/

I am having problems with the navigation Hover State, and I'm not able to create what I need to in CSS. The navDivider needs to be directly in the middle, so do the words. I have attached how the navigation should look - illustrating the hover State.

My code is:
-------------------------------
<div class="navBar">
<ul id="primary-nav">
<li><a href="#">iServices</a></li>
<li><a href="#">iQuote</a></li>
<li><a href="#">iFaqs</a></li>
<li><a href="#">iAbout</a></li>
<li><a href="#">iContact</a></li>
</ul>
</div>

My CSS is:
-------------------------------

.navBar {
width:1000px;
height:47px;
background-image:url(images/backNav.jpg);
background-repeat:repeat-x;
float:left;
}

#primary-nav {
float:left;
height:47px;
margin-left:0px;
padding:0px;

}
#primary-nav li,
#primary-nav li a {
float:left;
display:block;
margin:0px;

}
#primary-nav li a {
padding:0.0em 2.1em;
color:#fff;
display: block;
background-image:url(images/navDivider.jpg);
background-position:right top;
background-repeat:no-repeat;
font-weight:regular;
font-size:15px;
text-decoration:none;


}

#primary-nav li a:hover,
#primary-nav li.current a {
background-image:url(images/navHover.jpg);
background-repeat:repeat-x;
height:47px;
}



Many thanks!
Leigh

[leighchic]

Im not sure if anyone has read my message yet, but would really appreciate some urgent help on this! Thank you.