Варианты анимированного меню

Код:

a.mainmenu:hover {
padding:5px;
border: 5px solid #C0C0C0;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
}

но я имела в виду такую рисованную типа от руки обводочку

Тогда необходимо будет фиксировать ширину каждой текстовой ссылки и подставить изображение с обводкой им в фон.

Код:

a.mainmenu:hover {
padding:0 px;
border: 1px solid #E69898;
-moz-border-radius: 1px; /* Firefox */
-webkit-border-radius: 1px; /* Safari, Chrome */
-khtml-border-radius: 1px; /* KHTML */
border-radius: 5px; /* CSS3 */
}

Ринкате пишет:
- Просто веди это, вот оптималка)

Sunnyta пишет:

Тогда необходимо будет фиксировать ширину каждой текстовой ссылки и подставить изображение с обводкой им в фон.

Как это можно зафиксировать?

Код:

a.mainmenu, a.mainmenu:hover {
height: 40px;
padding-top:10px;
vertical-align:middle;
display:inline-block;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}

a.mainmenu:hover {
background: transparent url('http://i61.servimg.com/u/f61/14/71/65/95/afds110.png') top center no-repeat;
width: 100px;
}


Код:

a.mainmenu:hover {
background-image:url("ССЫЛКА КАРТИНКИ"); /* Путь к изображению при наведении */
background-position:0 0;
background-repeat:no-repeat;
padding-bottom:25px;
padding-left:25px;
}

Код:

a.mainmenu:hover {
background-image:url("ССЫЛКА КАРТИНКИ"); /* Путь к изображению при наведении */
background-position:0 0;
background-repeat:no-repeat;
padding-left:25px;
padding-bottom:25px;
display:inline-block;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}

Численные значения изменены под размеры кнопок?

Код:

height: 65px
и
margin-top:-65px

Я сейчас смотрю с 3-х браузеров - все нормально.