Имеется код

<div id="button1"><a>ссылка 1</a></div>		   
<div id="button2"><a>ссылка 2</a></div>		  
<div id="button3"><a>ссылка 3</a></div>

для каждого дива задаётся отдельный параметр расположения на странице, а вот стиль ссылки общий, для экономии места написал так

#button1 a, #button2 a, #button3 a{ 
              width:125px;
	height:26px;
	background: #999999 url("../images/button.png") no-repeat;
	font-size: 0.7em;
	color: #fff;
	text-align:center;
	vertical-align:top;
	line-height:26px;}
#button1 a:hover, #button2 a:hover, #button3 a:hover { background-position: 0 -26px; }

Так вот, суть стилей - при наведении мышью на ссылку-кнопку стиль кнопки меняется. Но при данном написании меняется только стиль последней кнопки списка - button3. Если добавить button 4 вниз, то будет стиль применим только к нему.

Как сделать, чтобы стиль кнопки при наведении менялся для всех ссылок в button1, 2 и 3?

<div id="button1"><a class="knopa">ссылка 1</a></div>		   
<div id="button2"><a class="knopa">ссылка 2</a></div>		  
<div id="button3"><a class="knopa">ссылка 3</a></div>

.knopa{ 
              width:125px;
	height:26px;
	background: #999999 url("../images/button.png") no-repeat;
	font-size: 0.7em;
	color: #fff;
	text-align:center;
	vertical-align:top;
	line-height:26px;}
.knopa:hover { background-position: 0 -26px; }

Наслаждайся.

<div id="button1"><a class="knopa">ссылка 1</a></div>     
<div id="button2"><a class="knopa">ссылка 2</a></div>    
<div id="button3"><a class="knopa">ссылка 3</a></div>

.knopa{ 
              width:125px;
	height:26px;
	background: #999999 url("../images/button.png") no-repeat;
	font-size: 0.7em;
	color: #fff;
	text-align:center;
	vertical-align:top;
	line-height:26px;}
.knopa:hover { background-position: 0 -26px; }

#button1{
    position:absolute;
	width:125px;
	height:26px;
	padding-top:3px;
	padding-left:250px;
    font-size:20px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 300;}