The hover state for "news" button needs to cover the "contact" button in the hover state. Now it just pushes it to the right. I tried experimenting with z-index but I can't get it to work.

Any suggestions?

HTML

<div id="nav-main">
	<ul>
            	<li class="nav-url"><a href="#" title="www.catalpha.com" target="_blank">www.catalpha.com</a></li>
                <li class="nav-bg"></li>
                <li class="nav-news"><a href="#" title="News">News</a></li>
                <li class="nav-contact"><a href="#" title="Contact Us">Contact</a></li>
        </ul>
</div>

CSS

#nav-main {
width: 840px;
height: 22px;}

#nav-main ul li {
list-style-type: none;
display: inline; }

#nav-main ul li a {
text-indent: -9999px;
float: left;
display: block; }

#nav-main ul li.nav-url a {
background-image: url(images/nav-url-240x44.jpg);
width: 240px;
height: 22px;
background-position: bottom center; }

#nav-main ul li.nav-url a:hover {
background-image: url(images/nav-url-240x44.jpg);
background-position: top center; }

#nav-main ul li.nav-bg  {
background-image: url(images/nav-center-spacer.jpg);
width: 385px;
height: 22px;
float: left;
display: inline; }

#nav-main ul li.nav-news a {
background-image: url(images/nav-news-85x22.jpg);
width: 85px;
height: 22px; }

#nav-main ul li.nav-news a:hover {
background-image: url(images/nav-news-hover-215x22.jpg);
width: 215px;
z-index: 1000; }

#nav-main ul li.nav-contact a {
background-image: url(images/Nav-conact-us-130x44.jpg);
width: 130px;
height: 22px;
background-position: bottom center;
z-index: 50; }

#nav-main ul li.nav-contact a:hover {
background-image: url(images/Nav-conact-us-130x44.jpg);
background-position: top center; }