CSS menu background positioning problem

Hi i have a css menu but there is a problem and i cant figure out why it happens my problem is i have a png background with buttons normal, hover and selected states. Background image is like this

But i see it on page开发者_开发知识库 like this, with wrong order. Css code is included below. Please help!

#menu {padding:0; margin:0; list-style:none; width:560px; height:42px; }

#menu li {float:left;}
#menu li.last {margin:0;}
#menu li a {display:block; height:42px; width:80px; padding:0; float:left; color:#666666; text-decoration:none; font-family:MuseoSans700; font-size:12px; text-align:center; cursor:pointer;}
#menu li a b {position:relative; top:13px; font-weight:normal;}

#menu li a b.current { font-family: MuseoSans900;}

#menu li#home a {background: url(nav_bg.png) 0px 0px ;}
#menu li#single a {background:url(nav_bg.png) 80px 0 ;}
#menu li#dropdown a {background: url(nav_bg.png) 160px 0 ;}
#menu li#dropline a {background: url(nav_bg.png) 240px 0 ;}
#menu li#flyout a {background:url(nav_bg.png) 320px 0 ;}
#menu li#support a {background:url(nav_bg.png) 400px 0 ;}
#menu li#contact a {background: url(nav_bg.png) 480px 0 ;}

#menu li#home a:hover {background:url(nav_bg.png) 0 -42px;}
#menu li#single a:hover {background:url(nav_bg.png) 80px -42px;}
#menu li#dropdown a:hover {background:url(nav_bg.png) 160px -42px;}
#menu li#dropline a:hover {background:url(nav_bg.png) 240px -42px;}
#menu li#flyout a:hover {background:url(nav_bg.png) 320px -42px;}
#menu li#support a:hover {background:url(nav_bg.png) 400px -42px;}
#menu li#contact a:hover {background:url(nav_bg.png) 480px -42px;}

#menu li#home a.current {background:url(nav_bg.png) 0 -84px;}
#menu li#single a.current {background:url(nav_bg.png) 80px -84px;}
#menu li#dropdown a.current {background:url(nav_bg.png) 160px -84px;}
#menu li#dropline a.current {background:url(nav_bg.png) 240px -84px;}
#menu li#flyout a.current {background:url(nav_bg.png) 320px -84px;}
#menu li#support a.current {background:url(nav_bg.png) 400px -84px;}
#menu li#contact a.current {background:url(nav_bg.png) 480px -84px;}

Your first coordinate needs to be negative. You need to move the background image to the left instead of to the right - you're getting the wrap-around effect.

For example:

#menu li#dropline a {background: url(nav_bg.png) 240px 0 ;}

should be

#menu li#dropline a {background: url(nav_bg.png) -240px 0 ;}

When you move the background image 240px to the right, it wraps around and you see the yellow background. When you move the background image 240px to the left you see the red background which is the desired effect.

can use CSS borders for the same effect

example jsfiddle

need to adjust line-height for :hover and .current border width changes, then assign color classes to set the top and bottom border colors.

#menu a {
    border-top:solid 2px;
    border-right:solid 1px #B5B6B4;
    border-bottom:solid 2px;
    border-left:solid 1px #E3E3E3;
}
#menu a:hover {border-top-width:3px;height:39px;line-height:37px;}
#menu .current {border-top-width:6px;height:36px;line-height:32px;}

#menu .lightblue {
    border-top-color:#B1C9E4;
    border-bottom-color:#B1C9E4;
}
#menu .red {
    border-top-color:#E30613;
    border-bottom-color:#E30613;
}
#menu .blue {
    border-top-color:#242457;
    border-bottom-color:#242457;
}
#menu .orange {
    border-top-color:#F18924;
    border-bottom-color:#F18924;
}