$(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); }); });
#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; }
<div id="nav"> <ul> <li class="current_page_item"><a href="#">List 00</a></li> <li><a href="#">List 01</a></li> <li><a href="#">List 02</a></li> <li><a href="#">List 03</a></li> <li><a href="#">List 04</a></li> <li><a href="#">List 05</a> <ul class='children'> <li><a href="#">List 05-01</a></li> <li><a href="#">List 05-02</a></li> <li><a href="#">List 05-03</a></li> </ul> </li> </ul> </div>