Question

I am working on a custom menu in jQuery and learning as I go. I was doing fine so far for the most part until I started the dropdown menu. A div in my dropdown overlaps my link and the link become unclickable. You will see what you mean when you test out the code. Any help is appreciated.
Here is a link to jsFiddle

Here is my 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;
}

Here is my 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>

And here is my 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

add

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

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