マウスホバーでアニメーションエフェクトのあるメニュー

Result

jQuery

$(document).ready(function() {
    /// 第1層と追加レイヤーで各アンカーの内側のコンテンツをラップ
    $("#menu li a").wrapInner('<span class="out"></span>').append('<span class="bg"></span>');

    // 生成したノードを追加
    $("#menu li a").each(function() {
        $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
    });

    $("#menu li a").hover(function() {
        // マウスホバー
        $(".out", this).stop().animate({
            'top': '45px'
        }, 250);
        $(".over", this).stop().animate({
            'top': '0px'
        }, 250);
        $(".bg", this).stop().animate({
            'top': '0px'
        }, 120);

    }, function() {
        // マウスアウト
        $(".out", this).stop().animate({
            'top': '0px'
        }, 250);
        $(".over", this).stop().animate({
            'top': '-45px'
        }, 250);
        $(".bg", this).stop().animate({
            'top': '-45px'
        }, 120);
    });
});

css

.menu { 
            height: 45px;
            display: block;
        }
 
        .menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
 
        .menu ul li { 
            float: left;
            overflow: hidden;
            position: relative;
            text-align: center;
            line-height: 45px;
        }
 
        .menu ul li a {
            position: relative;
            display: block;
            width: 110px;
            height: 45px;
            font-family: Arial;
            font-size: 11px;
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
        }
 
        .menu ul li a span {
            position: absolute;
            left: 0;
            width: 110px;
        }
 
        .menu ul li a span.out {
            top: 0px;
        }
 
        .menu ul li a span.over,
        .menu ul li a span.bg {
            /* hide */  
            top: -45px;
        }
 
 
        #menu {
            background: #EEE;
        }
 
        #menu ul li a {
            color: #000;
        }
 
        #menu ul li a span.over {
            color: #FFF;
        }
 
        #menu ul li span.bg {/*マウスホバー時に降りてくるspan。画像にするのも良いかも*/
            height: 45px;
            background: #666 ;
        }

html

<div id="menu" class="menu"> 
            <ul> 
                <li><a href="javascript:void(0);">メニュー1</a></li> 
                <li><a href="javascript:void(0);">メニュー2</a></li> 
                <li><a href="javascript:void(0);">メニュー3</a></li> 
                <li><a href="javascript:void(0);">メニュー4</a></li> 
                <li><a href="javascript:void(0);">メニュー5</a></li> 
            </ul> 
        </div>

via

Animated Menu