jQuery li expanding with more text

Question

Been trying to get these li elements to expand individually, one at a time when they are moused over: http://jsfiddle.net/LU5dW/1/ (using data-text attribute)

And another http://jsfiddle.net/LU5dW/ using a span .menu_text class. Can't get either one here to work.

jQuery Code for data-text attribute using .append:

$(document).ready(function() {
     $("#menu a").hover(function() {
         $(this).append($(this).children.eq(0).html("<span>" + $(this).children.eq(0).data('text') + "</span>")).css({width: 0}).stop(true, true).animate({width: "show"}, 700);
            }, function() {
                    $(this).children(":last-child").stop(true, true).animate({width: "hide"}, 700).remove();
            });
});

jQuery Code for .menu_text class with a display: none by default:

$(document).ready(function($) {
     $("#menu a").hover(function() {
                $(this).children(".menu_text").stop(true, true).animate({width: "show"}, 700);
            }, function() {
                $(this).children(".menu_text").stop(true, true).animate({width: "hide"}, 700);
            });
});

Could really use another set of eyes on this one. Thanks guys :)

Problem is I am trying to get each item to expand on mouseenter and than collapse on mouseleave, but not having any luck with either of these approaches. The data-text approach is throwing an error that I'm not catching somewhere...

EDIT

Here is another approach now using the data-text attribute, almost works, but it expands all of the li elements instead of just 1 of them... arggg: http://jsfiddle.net/LU5dW/2/

$(document).ready(function() {
     $("#menu li").hover(function() {
         $(this).children("a").append("<span>" + $(this).children("a").children(':first-child').data('text') + "</span>").hide().stop(true, true).animate({width: "show"}, 700);
            }, function() {
                    $(this).children("a").children(":last-child").stop(true, true).animate({width: "hide"}, 700).remove();
            });
});

Answer 1

I fixed this by adding float: left and clear: both to the li style. Also added overflow: hidden and a height to the a style to eliminate the text from creeping up as the li are expanding.

JSFiddle