ネストにも対応した、マウスホバーでアニメーションするナビゲーション

Result

jQuery

$(document).ready(function() {
    //ホバーイベントでアニメーションしながらサイズを変更
    $("#nav a").hover(function() {
        $(this).animate({width: 225}, 300);
    }, function() {
        $(this).animate({width: 200}, 300);
    });
    //ネスとされた要素を表示させる
    $("#nav li").hover(
    function() {
        $(this).find("ul:first").show(300);
    }, function() {
        $(this).find("ul:first").hide(300);
    });
});​

css

#nav ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#nav a {
    background-color: #395f2d;
    border: 0;
    color: #ffffff;
    display: block;
    line-height: 1;
    margin: 0px 0 5px -15px;
    padding: 4px 0px 5px 20px;
    width: 200px;
}

#nav .current_page_item>a{
    width: 225px !important;
}

#nav li:hover>a,
#nav .current_page_item>a{
    color: #dcbe87;
}

#nav .children{
    display: none;
    margin-left: 35px;
}​