плавное выдвижение css

[javascrip]

как сделать чтобы блок при наведении плавно выдвигался? ставлю transition: 1s работает, но плавно срабатывает только margin:0, то есть открывается быстро, а плавно только с margin-bottom до margin 0.

div {max-height:100px;overflow:hidden;margin-bottom:15px;transition: 1s;}

div:hover {max-height:100%;margin:0;}

[рони]

javascrip,
делайте полноценный пример.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[voraa]

<style>
div {
    max-height:100px;
    overflow:hidden;
    margin-bottom:15px;
    transition: margin-bottom 1s;
}

div:hover {
    max-height:100%;
    margin-bottom:0;
   transition: margin-bottom 1s;
}
</style>

[javascrip]

это то же самое что и transition: 1s;

нужно чтобы во всю высоту плавно выдвигался, а щас плавно только на маргин работает

[рони]

нужно чтобы

полноценный пример.