带有滑动背景的菜单的 z-index

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

类。 而且您不需要 z-index

#topMenuSlide

.

Answer 2

将position:relative; 添加到.menuItem

Answer 3

这不是你要找的吗？

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