CSS菜单背景定位问题

Question

嗨我有一个css菜单，但有一个问题，我无法弄清楚为什么它发生我的问题是我有一个png背景按钮正常，悬停和选定状态。背景图像就像这样

但我在页面上看到这样，订单错误。 Css代码包含在下面。请帮忙！

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

Answer 1

您的第一个坐标必须为负数。您需要将背景图像向左移动而不是向右移动 - 您将获得环绕效果。

例如：

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

应该是

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

当您将背景图像向右移动240px时，它会环绕并且您会看到黄色背景。将背景图像240px移动到左侧时，您会看到红色背景，这是所需的效果。

Answer 2

可以使用CSS border来获得相同的效果

example jsfiddle

需要针对line-height和:hover边框宽度更改调整.current，然后指定颜色类以设置top和bottom边框颜色。

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