animating width of multiple elements at once results in: shocker, animation overload

so i have an ul-based navigation menu where i have attempted to expand and collapse different menu items at once after hover (think expand the hovered menu tab and the rest shrink). the menu itself is dynamic, hence the use of %'s and the reason for expanding and shrinking menu items.

my jquery knowledge is pretty weak, so i wasn't surprised that i would have issues with looping animations and menu items bumping down the page. any tips to clean up the code?

jQuery:

    $(document).ready(function(){  

        $(".navigation li").mouseover(function(){  
            $(this).stop().animate({width:'24%'},{queue:false, duration:600}).siblings().animate({'width':'4%'},400);
        });  

        $(".navigation li").mouseout(function(){  
            $(this).stop().animate({width:'5%'},{queue:false, duration:600}).siblings().animate({'width':'5%'},600);
        });  

    }); 

CSS:

/* Navigation Menu */

.navigation {
position:absolute;
top: 6.5em;
left: 4%;
widt开发者_开发百科h: 92%;
list-style-type:none;
}

.navigation li {
float: left;
width: 9.4%;
}

#one    {background:#666;}
#two    {background:#000;}
#three  {background:#666;}
#four   {background:#000;}
#five   {background:#666;}
#six    {background:#000;}
#seven  {background:#666;}
#eight  {background:#000;}
#nine   {background:#666;}
#ten    {background:#000;}

.navigation li a, .navigation li a:visited {
display: block;
height: 6em;
color:#FFF; 
text-decoration:none;
}

.navigation li a:hover, .navigation li a:focus {
color:#ff8300; 
text-decoration: underline;
}   

HTML:

    <ul class="navigation" >  

    <li id="one"><h3><a href="#">1</a></h3></li>
    <li id="two"><h3><a href="#">2</a></h3></li>
    <li id="three"><h3><a href="#">3</a></h3></li>
    <li id="four"><h3><a href="#">4</a></h3></li>
    <li id="five"><h3><a href="#">5</a></h3></li>
    <li id="six"><h3><a href="#">6</a></h3></li>
    <li id="seven"><h3><a href="#">7</a></h3></li>
    <li id="eight"><h3><a href="#">8</a></h3></li>
    <li id="nine"><h3><a href="#">9</a></h3></li>
    <li id="ten"><h3><a href="#">10</a></h3></li>

</ul>    

I've modified the script a bit. See if it helps.

http://jsfiddle.net/bGUxX/