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
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; }
