css sprite導航佈局問題

Question

我有一個導航網格，我想要使用精靈創建翻轉。感謝網站上的其他提示，我設法開始了。

You can check the code here.

<ul id="navigation"> 
<li class="button_1"><a href="#" title="Go to the this page">Button text</a></li> 
<li class="button_2"><a href="#" title="Go to the this page">Button text</a></li> 
<li class="button_3"><a href="#" title="Go to the this page">Button text</a></li> 
<li class="button_4"><a href="#" title="Go to the this page">Button text</a></li> 
<li class="button_5"><a href="#" title="Go to the this page">Button text</a></li> 
</ul> 


#navigation{ 
display: block; 
width: 907px; 
height: 296px; 
background: url(http://i.imgur.com/WbDp9lf.jpg) left top no-repeat; 
} 

#navigation li{ 
display: block; 
float: left; 
} 

#navigation li a{ 
display: block; 
height:296px; 
text-indent:-9999px; 
} 

#navigation li a:hover, 
#navigation li a.on{ 
background-image: url(http://i.imgur.com/WbDp9lf.jpg); 
} 

#navigation li.button_1 a {width:175px; background-position:0px 0px;} 
#navigation li.button_1 a:hover {background-position:0px -296px;} 
/* 

的問題是 - 在導航圖標兩行。我怎樣才能控制只有一個盒子正在改變。目前只有改變垂直組的作品。

checking my jsfiddle will show it better i think.

的感謝！

Answer 1

這是你想要的嗎？

http://jsfiddle.net/ahyv7/2/

我刪除了很多unusefull的CSS ...剩餘的（好）一個是

#navigation { 
    display: block; 
    width: 907px; 
    height: 296px; 
} 
#navigation li { 
    display: block; 
    float: left; 
} 
#navigation li a { 
    display: block; 
    height:148px; 
    width: 181px; 
    background: url(http://i.imgur.com/WbDp9lf.jpg) left top no-repeat; 
    text-indent:-9999px; 
    background-position:0px 0px; 
} 
#navigation li a:hover { 
    background-position:0px -296px; 
} 

，使你的工作，你需要有1只讀取和1個灰色rectagle精靈 設置width/height正常li a顯示與background-position:0px 0px只能看到紅色矩形...懸停移動背景uppper ......這就是所有