z-index pour menu avec fond coulissant

Question

J'essaie de créer un menu horizontal qui aura un fond coulissant qui se déplace vers l'élément plané. J'ai un violon ci-dessous montrant une configuration typique lorsque l'utilisateur est sur la page "Accueil". Le div rouge est censé être positionné sous le div menuItem et pour une raison quelconque, le résultat que je reçois n'est pas tout à fait raison. Quel est le problème avec mon 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

Vous devez spécifier

position: relative;

pour votre

.menuItem

classe. Et vous n'avez pas besoin z-index pour

#topMenuSlide

.

Answer 2

Ajouter position:relative; à .menuItem

Answer 3

est-ce pas ce genre de ce que vous cherchez?

$('.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/

Et faire pour la faire apparaître sous:

$('.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/