Вообще я не фанат всяких изысков, типа выпадающих меню и т.п. Но данный изящный способ покорил мое черствое сердце

HTML код представляет собой обычный список, вложенный в DIV:

<div id=»menu»>
<ul>
<li><a href=»" title=»">Главная</a></li>
<li><a href=»" title=»">О нас</a></li>
<li><a href=»" title=»">Портфолио</a></li>
<li><a href=»" title=»">Контакты</a></li>
</ul>
</div>

DIV, конечно, использовать не обязательно. Но для капризного IE6, который делает высоту списка равной высоте самого высокого элемента в нём, не будем пренебрегать лишними строчками.

Так будет выглядеть описание нужных нам ID в CSS:

#menu{
position:relative;
height:30px;
background:#F04F31;
border-bottom:solid 3px #000;
margin-bottom:10px
z-index:100;
}
#menu ul{
position:absolute;left:0;top:0
list-style:none;
font-size:0.85em;
}
#menu li{
float:left
}
#menu li a{
display:block;
float:left;
height:30px;
line-height:30px;
padding:0 20px;
background:#F04F31;
color:#fff
text-decoration:none;
}

Теперь сам эффект. Подключаем в секцию head сам фреймворк:

<script type=»text/javascript» src=»mootools.js»></script>

и небольшой javascript код:

<script type=»text/javascript»>
window.addEvent(‘domready’, function(){
$$(‘#menu a’).each(function(el) {
var fx = new Fx.Morph(el,{duration:700,transition:Fx.Transitions.Bounce.easeOut,link:’cancel’});
el.addEvents({
‘mouseenter’: function() {fx.start({‘padding-top’:30, ‘background-color’:'#000′});},
‘mouseleave’: function() {fx.start({‘padding-top’:0, ‘background-color’:'#F04F31′});}
});
});
});
</script>

Все
Да, и не забудьте скачать фреймворк Mootools.