Отображение базовой ссылки на mouseOver

Question

Я немного искал и не смог найти ответ, который соответствовал моему вопросу. Хотя использование z-индекса и абсолютного позиционирования, похоже, сработает, это не так.

То, что я пытаюсь сделать, - это меню, которое скользит влево на мыши, отображая базовую ссылку ... Я пытался заставить его работать без особого успеха. Я попытался использовать абсолютное позиционирование на клонированном элементе, чтобы поместить его за родителем, но это не сработало. Я использовал z-index, чтобы убедиться, что клон был за его родителем.

Мой код выглядит следующим образом:

<ul id="nav"> 
    <li><a href="#" data-slide-text="slide-aaa">aaa</a></li> 
    <li><a href="#" data-slide-text="slide-bbb">bbb</a></li 
</ul> 



(function ($) { 
$.fn.doIt = function() {  
    this.find('li') 
     .css({ 
      overflow : 'auto' 
     })   
     .hover(
      function(){ 
       $(this).find('a:first').animate({ 
        marginLeft : "-150px" 
       }, 'fast') 
     }, 
      function(){ 
       $(this).find('a:first').animate({ 
        marginLeft : "0px" 
       }, 'fast')      
     }) 
    this.find('a') 
     .each(function(){ 
      var slideText = $(this).data('slideText'); 
      $(this) 
       .clone() 
       .text(slideText) 
       .appendTo($(this).parent()) 
       .addClass('slideClass') 
     }); 
}; 
})(jQuery); 

CSS-используется:

#nav li{ 
    list-style: none; 
    float: left; 
    width: 150px; 
    height: 20px; 
    color: #CCCCCC; 
    height: 60px; 
    line-height: 30px; 
    text-align: center; 
} 

#nav a{ 
    position: relative; 
    display: block; 
    width: 150px; 
    z-index: 1; 
    background: #777777; 
} 

.slideClass{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    display: block; 
    background: #000000; 
    color: #6699dd; 
    z-index: 3; 
} 

Вы можете увидеть живой пример на: jQuery slide menu

Answer 1

Я изменил свой CSS в working fiddle

Основные изменения, которые я сделал это к вашему CSS:

#nav li { 
    display: inline-block; 
    overflow: hidden !important; 
    white-space: nowrap; 
} 

Я также удалил свои height: объявления для #nav li и position: связанных деклараций для .slideClass. Наконец, я изменил #nav a на display: inline-block;.

Answer 2

Не 100% уверен, что если бы это было то, что вы искали: http://jsfiddle.net/t4ag1tby/

Изменена Ли с абсолютной

#nav a{ 
    position: absolute; 
    top: 0; 
    ... 
} 

и действие парения анимировать положение вместо края.

  .hover(
       function(){ 
        $(this).find('a:first').animate({ 
         left : "-150px" 
        }, 'fast') 
      }, 
       function(){ 
        $(this).find('a:first').animate({ 
         left : "0px" 
        }, 'fast')      
      })