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-индекс для

# topMenuSlide

.

Answer 2

Разве это не то, что вы ищете?

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

Answer 3

Добавить position:relative; к .menuItem