z-index for menu with sliding background

Question

I am trying to create a horizontal menu that will have a sliding background that moves to the hovered item. I have a fiddle below showing a typical setup when the user is on the "Home" page. The red div is supposed to be positioned underneath the menuItem div and for some reason the result I'm getting is not quite right. What is wrong with my 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

Isn't this sort of what you're looking for?

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

And to make to make it show underneath:

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

Answer 2

Add position:relative; to .menuItem

Answer 3

You need to specify

position: relative;

for your

.menuItem

class. And you don't need z-index for

#topMenuSlide

.