CSS - z-index/绝对定位问题。链接后面需要一个 div

Question

我正在开发 jQuery 中的自定义菜单并在学习过程中学习。到目前为止，在我启动下拉菜单之前，我大部分时间都做得很好。我的下拉列表中的 div 与我的链接重叠，并且链接变得不可点击。当你测试代码时，你会明白你的意思。任何帮助表示赞赏。 Here is a link to jsFiddle

这是我的 CSS：

li {
    background-color: #ccc;
    position: relative;
    color: #fff;
    z-index: -2;
    float: left;
}
div.menu-item {
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    z-index: -1;
}
a.menu-text {
    display: block;
    color: #fff;
    margin: 0;
    padding: 10px;
    padding-bottom: 15px;
}
div.dropdown {
    display: none;
    position: absolute;
}
div.dropdown-item {
    position: relative;
    background-color: #1E4b55;
}
div.dropdown-item a {
    padding: 10px;
    padding-left: 15px;
    display: block;
    white-space: nowrap;
    color: #fff;
}
div.dropdown-left {
    height: 100%;
    width: 10px;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
}

这是我的 HTML

<div>
    <ul>
        <li>
            <div class="menu-item"></div>
            <a class="menu-text" href="#">text</a>
            <div class="dropdown">
                <div class="dropdown-item"><div class="dropdown-left"></div><a href="#">item 1</a>

                </div>
                <div class="dropdown-item"><a href="#">item 2</a>

                </div>
                <div class="dropdown-item"><a href="#">item 3</a>

                </div>
            </div>
        </li>
        <li>
            <div class="menu-item"></div>
            <a class="menu-text" href="#">texttexttext</a>
        </li>
        <li>
            <div class="menu-item"></div>
            <a class="menu-text" href="#">tetexttexttexttexttexttexttextxt</a>
        </li>
    </ul>
</div>

这是我的 javascript：

$(function () {
    $("li").hover(
    function () {
        $(this).find('div.menu-item').stop().animate({
            height: '100%'
        }, {
            duration: 700,
            specialEasing: {
                height: 'easeOutQuint'
            }
        });
        $(this).find('div.dropdown').slideDown();
    },

    function () {
        $(this).find('div.menu-item').stop().animate({
            height: '10px'
        }, 700);
        $(this).find('div.dropdown').stop().slideUp();
    });
    $("div.dropdown-item").hover(
        function(){
            $(this).find('div.dropdown-left').stop().animate({
                width: '100%'
            }, {
                duration: 700,
                specialEasing: {
                    width: 'easeOutQuint'
                }
            });
        },
        function(){
            $(this).find('div.dropdown-left').stop().animate({
                width: '10px'
            }, 500);
        }
    );
});

Answer 1

添加

div.dropdown-item a {
    position: relative;
}

http://jsfiddle.net/Y9knm/2/