JQuery литий расширяется с большим количеством текста

Question

пытался получить эти элементы Li расширить в отдельности, один в то время, когда они наведение мышки: http://jsfiddle.net/LU5dW/1/ (используя data-text атрибут)

И еще http://jsfiddle.net/LU5dW/ с помощью пролета .menu_text класса. Не могу получить ни одного здесь, чтобы работать.

JQuery код для data-text атрибута с помощью .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 код для .menu_text класса с display: none по умолчанию:

$(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); 
      }); 
}); 

Может действительно использовать другой набор глаза на это. Спасибо, ребята :)

Проблема в том, что я пытаюсь получить каждый элемент для расширения на mouseenter, а не свернуть на mouseleave, но не имеет никакого счастья ни с одним из этих подходов. data-text подход бросает ошибку, что я не ловить где-то ...

EDIT

Вот другой подход теперь используется атрибут data-text, почти работает, но он расширяется все li элементы, а не только 1 из них ... 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

Я установил это, добавив float: left и clear: both к li стиль. Также добавлен overflow: hidden и height в a стиль, чтобы исключить текст из ползания по мере того, как li расширяются.

JSFiddle