jquery - Expanding lists -

i have spent many hours playing , searching answer no joy!

i have list when hover on it, want list elements expand in width - have working, when mouse leaves list, want list elements go original size (this not set size).

the css:

#navigation ul { position: absolute; right: 0; bottom: 10px; height: 30px; list-style: none; }  #navigation ul li { display: inline-block; margin-right: 20px; text-transform: uppercase; color: #fff; font-size: 12px; height: 30px; line-height: 30px; text-align: left; list-style: none; background: #c00; } 

the html:

<ul id="nav">      <li>about us</li>     <li>news</li>     <li>services</li>     <li>area profiles</li>     <li>book valuation</li>     <li>testimonials</li>     <li>contact</li>  </ul> 

the jquery

 $('#nav li').each(function() {      $.data(this, 'width', $(this).width());  });  $('#nav').hover(function() {       $('#nav li').stop().animate({width:"150px"}); },     function() {$('#nav li').stop().animate({width: $(this).data('width') + "px"}); }); 

any great!! trying recreate menu: http://teefouad.com/themes/truestory/

i've modified bit js in order target lis accurately:

var $nav = $('#nav'), $lis = $nav.find('li');  $lis.each(function() {      $(this).attr('data-realwidth', $(this).width());  });  $nav.on('mouseenter', function() {       $lis.stop().animate({width:150}); });  $nav.on('mouseleave', function() {     $lis.stop().each(function() {          $(this).animate({width: $(this).data('realwidth')});      }); }); 

http://jsfiddle.net/kge66es0/