Home/ Questions/Q 6226153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T08:58:23+00:00

Hi i have a css menu but there is a problem and i cant

  • 0

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

Menu buttons sprite

But i see it on page like this, with wrong order. Css code is included below. Please help!

enter image description here

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0