スライディング背景付きメニューのZ-インデックス

Question

ホバリングされたアイテムに移動するスライディング背景を持つ水平メニューを作成しようとしています。私は、ユーザーが "ホーム"ページにいるときの典型的なセットアップを示す下のフィドルを持っています。赤いdivはmenuItem divの下に配置されるはずです。何らかの理由で私が得ている結果は正しくはありません。私のCSSで何が間違っていますか？

JSFiddle：http://jsfiddle.net/Jaybles/9drwk/

HTML

<div class="menu" id="topMenu"> 
    <div id="topMenuSlider"></div> <!-- Red Sliding Background--> 

    <div class="menuItem" id="menu_index"> 
     <a href="/index.php">Home</a>      
    </div> 

    <div class="menuItem" id="menu_howitworks"> 
     <a href="/howitworks.php">How it Works</a>      
    </div> 

    <div class="menuItem" id="menu_benefits"> 
     <a href="/benefits.php">Benefits &amp; Savings</a>      
    </div> 

    <div class="menuItem" id="menu_quote"> 
     <a href="/quote.php">Request a Quote</a>      
    </div>  

    <div class="menuItem" id="menu_dealers"> 
     <a href="/dealers.php">Dealer Information</a>      
    </div>  
</div> 

JS

var item = $('#menu_index'); 
$('#menuItem').css({ 
    'z-index:': '9999' 
}); 
$('#topMenuSlider').css({ 
    'top' : (item.position().top -5) + 'px', 
    'left' : (item.position().left-5) + 'px', 
    'width' : (item.width()+10) + 'px', 
    'height' : (item.height()+10) + 'px', 
    'z-index:': 'auto' 
}); 

CSS

div.menu{ 
    font-family: verdana; 
    font-size:13px; 
    width:1100px; 
    height:29px; 
    color:#fff; 
    text-align: left; 
    padding: 6 px 0px 0px 8px; 
    margin: 0px 0px 0px 0px; 
    border 1px dashed #000; 
    overflow:hidden; 
} 

.menuItem{ 
    margin-right:20px; 
    font-family: verdana; 
    font-size:11px; 
    font-weight:bold; 
    color:#fff;  
    display:inline; 
    cursor:pointer; 
    height:25px; 
} 
#topMenuSlider{ 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px;  
    background:#ff0000; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ff3333'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#000000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ff0000, #000000); /* for firefox 3.6+ */ 
    position:absolute;  
} 

Answer 1

あなたが

位置を指定する必要があります。相対的な;あなたの

.menuItem

クラスの

。 そして、あなたは

#topMenuSlide

のためのzインデックスを必要としません。

Answer 2

Answer 3

は、あなたが探しているものは、この種ではないですposition:relative;.menuItemに追加しますか？

$('.menuItem').hover(function(){ 
    $('#topMenuSlider').css({ 
     'top' : ($(this).position().top -5) + 'px', 
     'left' : ($(this).position().left-5) + 'px', 
     'width' : ($(this).width()+10) + 'px', 
     'height' : ($(this).height()+10) + 'px' 
    }); 
}); 

.menuItem{ 
    z-index: 9999; 
    margin-right:20px; 
    font-family: verdana; 
    font-size:11px; 
    font-weight:bold; 
    color:#fff;  
    display:inline; 
    cursor:pointer; 
    height:25px; 
} 

#topMenuSlider{ 
    z-index: -1; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px;  
    background:#ff0000; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ff3333'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#000000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ff0000, #000000); /* for firefox 3.6+ */ 
    position:absolute; 
} 

http://jsfiddle.net/9drwk/2/

そして、それは下に表示させるために作る：

あなたがでこれをテストしているブラウザ

$('.menuItem').hover(function(){ 
    $('#topMenuSlider').css({ 
     'top' : ($(this).position().top + $(this).height() + 2) + 'px', // This line 
     'left' : ($(this).position().left-5) + 'px', 
     'width' : ($(this).width()+10) + 'px', 
     'height' : ($(this).height()+10) + 'px' 
    }); 
}); 

http://jsfiddle.net/9drwk/4/