CSS - z-index /絕對定位問題。需要一個鏈接後面的div

Question

我正在jQuery中的自定義菜單上工作，並隨時隨地學習。直到我開始下拉菜單時，我在大部分時間都表現良好。我的下拉菜單中的div與我的鏈接重疊，鏈接變得無法點擊。當你測試代碼時你會看到你的意思。任何幫助表示讚賞。 Here is a link to jsFiddle

這裏是我的CSS：

li { 
    background-color: #ccc; 
    position: relative; 
    color: #fff; 
    z-index: -2; 
    float: left; 
} 
div.menu-item { 
    background-color: #000; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 10px; 
    z-index: -1; 
} 
a.menu-text { 
    display: block; 
    color: #fff; 
    margin: 0; 
    padding: 10px; 
    padding-bottom: 15px; 
} 
div.dropdown { 
    display: none; 
    position: absolute; 
} 
div.dropdown-item { 
    position: relative; 
    background-color: #1E4b55; 
} 
div.dropdown-item a { 
    padding: 10px; 
    padding-left: 15px; 
    display: block; 
    white-space: nowrap; 
    color: #fff; 
} 
div.dropdown-left { 
    height: 100%; 
    width: 10px; 
    background-color: #000; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

這裏是我的HTML

<div> 
    <ul> 
     <li> 
      <div class="menu-item"></div> 
      <a class="menu-text" href="#">text</a> 
      <div class="dropdown"> 
       <div class="dropdown-item"><div class="dropdown-left"></div><a href="#">item 1</a> 

       </div> 
       <div class="dropdown-item"><a href="#">item 2</a> 

       </div> 
       <div class="dropdown-item"><a href="#">item 3</a> 

       </div> 
      </div> 
     </li> 
     <li> 
      <div class="menu-item"></div> 
      <a class="menu-text" href="#">texttexttext</a> 
     </li> 
     <li> 
      <div class="menu-item"></div> 
      <a class="menu-text" href="#">tetexttexttexttexttexttexttextxt</a> 
     </li> 
    </ul> 
</div> 

這裏是我的javascript：

$(function() { 
    $("li").hover(
    function() { 
     $(this).find('div.menu-item').stop().animate({ 
      height: '100%' 
     }, { 
      duration: 700, 
      specialEasing: { 
       height: 'easeOutQuint' 
      } 
     }); 
     $(this).find('div.dropdown').slideDown(); 
    }, 

    function() { 
     $(this).find('div.menu-item').stop().animate({ 
      height: '10px' 
     }, 700); 
     $(this).find('div.dropdown').stop().slideUp(); 
    }); 
    $("div.dropdown-item").hover(
     function(){ 
      $(this).find('div.dropdown-left').stop().animate({ 
       width: '100%' 
      }, { 
       duration: 700, 
       specialEasing: { 
        width: 'easeOutQuint' 
       } 
      }); 
     }, 
     function(){ 
      $(this).find('div.dropdown-left').stop().animate({ 
       width: '10px' 
      }, 500); 
     } 
    ); 
}); 

Answer 1

添加

div.dropdown-item a { 
    position: relative; 
} 

http://jsfiddle.net/Y9knm/2/