Result
http://jsfiddle.net/kachibito/smZUb/5/embedded/result,js,css,html
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; }