CSS菜單背景定位問題

嗨，我有一個CSS菜單，但有一個問題，我不能找出爲什麼會發生我的問題是我有一個PNG背景與按鈕正常，懸停和選定狀態。背景圖像是這樣CSS菜單背景定位問題

Menu buttons sprite

不過我看它網頁上像這樣，以錯誤的順序。 Css代碼包含在下面。請幫忙！

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

來源

2011-08-08 skuul

你能不能把你的HTML也加入？不過，我相信這是你背景位置座標的一個問題。 –

請翻譯！ –

你的第一個座標的需求爲負。您需要將背景圖像移到左側而不是右側 - 您將獲得環繞效果。

例如：

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

應該

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

當你移動的背景圖像240像素的權利，它將繞，你看到黃色的背景。當您將背景圖像240px移動到左側時，您會看到所需效果的紅色背景。

來源

2011-08-08 15:28:20 AlienWebguy

謝謝，我明白我的錯誤。但我會在下面使用純CSS版本。 – skuul

你決定使用什麼和最好的回答你的問題是非常不同的朋友。雖然mdmullinax的建議是在這種情況下走的路，但它不能回答你的問題，並且不會幫助未來的用戶遇到與後臺定位相同的問題。 – AlienWebguy

你對對不起，我沒有想到這一點。 – skuul

可以使用CSS border S爲同樣的效果

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

來源

2011-08-08 15:50:54 MikeM

歡呼的隊友，這是非常好的你。 – skuul

+1是一個很好的運動，並提供一個很好的替代解決方案。 – AlienWebguy

CSS菜單背景定位問題

回答

相關問題