Проблемы компоновки навигации спрайта css

Question

У меня есть навигационная сетка, для которой я хочу создавать ролловеры, используя спрайты. Благодаря другим советам на сайте мне удалось начать.

Вы можете проверить код здесь.

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

Проблема в том, что навигация - это два ряда иконок. Как я могу контролировать, что меняется только одна коробка? В настоящее время работает только смена вертикальных групп.

проверка моего jsfiddle покажет это лучше, я думаю.

Спасибо!

Answer 1

Это то, что вы хотите?

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

я удалил много ненужного 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 серым прямоугольником width / height к нормальному li a дисплей и с background-position:0px 0px вы видите только красный прямоугольник... при наведении переместите фон вверх... вот и все