How do I keep all sub-menu items open at once?

I'm going to do my best to articulate this, hopefully it's clear.

I have a nav menu with a series of menu-items. When you hover over a certain menu item, an associated content-area slides down into view. On mouse leave of the content-area, it slides back out of view.

If the the user decides to hover over a different menu-item while one content-area is already open, the second associated content-area slides in to view as well. So in this case, both content areas are still open, stacked on top of each other.

My problem is that if you hover over the upper most content-area, everything is fine, but if you move your cursor down to explore the second content area (both of which are currently open), they both collapse.

My question is, can someone please explain to me what I need to do in order that each open content-area will stay open, regardless of what content-area the user is currently engaging with.

Here's an example of the markup:

<ul>
    <li id="menu-item-1">contact</li>
    <li id="menu-item-2">artists</li>
</ul>

<div class="dropdown-contact">
    <p class="big-intro-c">contact</p>
    <div class="row dc-content">
        contact content
    </div> <!-- .row .dc-content -->
</div> <!-- .dropdown-contact-->

<div class="dropdown-artists">
    <p class="big-intro-a">artists</p>
    <div class="row da-content">
        artists content
    </div> <!-- .row .da-content -->
</div> <!-- .dropdown-artists-->

And the relative CSS:

ul {
    position: relative;
    z-index: 10;
    width: 100%;
}

li {
    display: inline;
}

.dropdown-contact, .dropdown-artists {
    display: none;
    position: relative;
    z-index: 1;
    width: 100%;
}

.big-intro-c, .big-intro-a {
    position: absolute;
    opacity: 1;
    z-index: 5;
}

.dc-content, .da-content {
    position: relative;
    opacity: 0;
    z-index: 10;
}

Here's my .js (apologies - I'm still learning):

$(function () {
    $(document).on("mouseenter", "#menu-item-1, .dropdown-contact", function () {
        $(".dropdown-contact").stop().slideDown(500, function() {
            $(".big-intro-c").stop().fadeTo(200, 0, function() {
                $(".dc-content").stop().fadeTo(200, 1)
            });
        });
    });

    $("#menu-item-1, .dropdown-contact").not('#menu-item-1').mouseleave(function () {
        $(".dc-content").stop().fadeTo(500, 0, function() {
            $(".dropdown-contact").stop().slideToggle(500, function() {
                $(".big-intro-c").stop().fadeTo(1000, 1)
            });
        });
    });
});

$(function () {
    $(document).on("mouseenter", "#menu-item-2, .dropdown-artists", function () {
        $(".dropdown-artists").stop().slideDown(500, function() {
            $(".big-intro-a").stop().fadeTo(200, 0, function() {
                $(".da-content").stop().fadeTo(200, 1)
            });
        });
    });

    $("#menu-item-2, .dropdown-artists").not('#menu-item-2').mouseleave(function () {
        $(".da-content").stop().fadeTo(500, 0, function() {
            $(".dropdown-artists").stop().slideToggle(500, function() {
                $(".big-intro-a").stop().fadeTo(1000, 1)
            });
        });
    });
});

I've included a fiddle: http://jsfiddle.net/LrCTA/8/ though there seems to be some things that I can't mirror from my production site: http://ericbrockmanwebsites.com/ I think what is there, though, does show the issue.

As always, thanks in advance for any insight you may be able to provide.

Answers


Need Your Help

Can curl act a substitute for programs like Selenium, HtmlUnit, watir etc?

curl selenium htmlunit webdriver

I need to script some web forms pages and curl appears to be the answer as it has PHP support.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.