Изменение кнопки меню в адаптивной вёрстке

[cuyofiveg]

Добрый день.

Помогите, пожалуйста, разобраться, никак не могу сделать так, чтобы на маленьких экранах кнопки становились меньше. Конструкция кнопок выглядит таким вот образом. Как прописать при:

@media screen and (max-width: 700px) and (min-width: 300px){

их уменьшение? Кнопки даже не думают уменьшаться, просто переносятся в строку, а размер картинок не меняется. Пробовал уже всякое найденное в сети, но ни в какую не меняется размер.

Нужно сделать их адаптивными. Просто картинку адаптивной могу сделать, картинку в виде ссылки могу сделать, но нужно чтобы при наведении картинка менялась, а из-за этого она становится тегом "<a href=...", а в нём картинка указывается через "background: url", а к нему не достучаться.

Пробовал даже такие штуки, не помогает...

background: url(background.png) no-repeat;
-webkit-background-size: 100%;
-o-background-size: 100%;
-moz-background-size: 100%;
-ms-background-size: 100%;
-khtml-background-size: 100%;
background-size: 100%;

 

 

Структура кнопок примерно такая:

 

<style>
a.menu1 {
	display: inline-block;
    background: url(images/menu1.png);
    width: 100px;
    height: 60px;
	}

a.menu1:hover {
    background: url(images/menu2.png);
	transition: all 900ms ease-out;
   }
</style>




<table>
<tr>
		<td class="menu">
		<a href="#" class="menu1"> </a>
		</td>
</tr>
</table>

 

[Igor Schnaider]

Лучше соберите пример.