jQuery accordion navigation with mouseover/mouseout

Question

I'm trying to create an accordion navigation menu with the following properties:

Hover over a parent LI, and its sub-menu slides down. If you mouse down to hover over the sub-menu, it stays open as you'd expect.

If you move your cursor off of either the parent link or the sub-menu, the sub-menu slides up again.

I thought I was getting close - I can get the sub-menu to slideDown, but when I hover over it, I've had to mouseout on the parent LI, triggering a slideUp. I just can't figure out how to make this do what I need it to!

Here's my script:

<script type="text/javascript">

$(document).ready(function() {

//If its a page parent (based off wordpress), add the class "display-list"
//This way the accordion will be opened up on the page you are on.
if ($('#nav li').hasClass("current_page_parent")) {
$('#nav .current_page_parent ul').addClass("display-list"); }

// Hide the submenus
$('#nav li ul').hide();
// Add a class to the parent li IF it has sub UL's
$("#nav li:has(ul)").addClass("nav-parent");
// Add a class to sub-UL if it has a parent LI
$("#nav li ul").addClass("nav-child");

// When you hover over the link in the parent LI...
$('#nav li.nav-parent').mouseover( function() {
// ...slide the sub-UL into view, and remove the 'display-list' class
$(this).children('.nav-child').slideDown(1000).removeClass("display-list");
}).mouseout( function() {
$(this).children('.nav-child').slideUp(1000);
});

});
</script>

And here's my HTML markup:

<!-- Start: Navigation -->
<ul id="nav">
<li class="hidden"><a href="#main">Skip to Content</a></li>
<li class="page_item page-item-2 current_page_item"><a href="http://www.examplewebsite.com"&gt;Home&lt;/a&gt;&lt;/li&gt;
<li class="page_item page-item-44"><a href="http://www.examplewebsite.com/who-we-are/"&gt;Who we are</a>
    <ul>
        <li class="page_item page-item-99"><a href="http://www.examplewebsite.com/who-we-are/partners-consultants-and-alliance-partners/"&gt;Partners, Consultants and Alliance Partners</a></li>
        <li class="page_item page-item-105"><a href="http://www.examplewebsite.com/who-we-are/who-we-work-with/"&gt;Who we work with</a></li>
        <li class="page_item page-item-107"><a href="http://www.examplewebsite.com/who-we-are/coffey-graham-north-star-alliance/"&gt;Coffey Graham North Star Alliance</a></li>
    </ul>
</li>
<li class="page_item page-item-47"><a href="http://www.examplewebsite.com/what-we-do/"&gt;What we do</a>
    <ul>
        <li class="page_item page-item-48"><a href="http://www.examplewebsite.com/what-we-do/technology-transactions-and-outsourcing/"&gt;Technology transactions and Outsourcing</a></li>
        <li class="page_item page-item-53"><a href="http://www.examplewebsite.com/what-we-do/dispute-resolution-and-avoidance-arbitration-mediation-and-litigation/"&gt;Dispute Resolution and Avoidance: Arbitration, Mediation and Litigation</a></li>
        <li class="page_item page-item-56"><a href="http://www.examplewebsite.com/what-we-do/company-commercial-and-private-equity-work/"&gt;Company/Commercial and Private Equity Work</a></li>
        <li class="page_item page-item-314"><a href="http://www.examplewebsite.com/what-we-do/virtual-general-counsel-service/"&gt;Virtual General Counsel Service</a></li>
        <li class="page_item page-item-117"><a href="http://www.examplewebsite.com/what-we-do/training-and-coaching/"&gt;Training and coaching</a></li>
    </ul>
</li>
<li class="page_item page-item-59"><a href="http://www.examplewebsite.com/see-us-in-action/"&gt;See us in action</a>
    <ul>
        <li class="page_item page-item-152"><a href="http://www.examplewebsite.com/see-us-in-action/blog/"&gt;Blog&lt;/a&gt;&lt;/li&gt;
        <li class="page_item page-item-154"><a href="http://www.examplewebsite.com/see-us-in-action/podcasts/"&gt;Podcasts&lt;/a&gt;&lt;/li&gt;
        <li class="page_item page-item-150"><a href="http://www.examplewebsite.com/see-us-in-action/training-and-coaching/"&gt;Training and coaching</a></li>
        <li class="page_item page-item-160"><a href="http://www.examplewebsite.com/see-us-in-action/publications/"&gt;Publications&lt;/a&gt;&lt;/li&gt;
    </ul>
</li>
<li class="page_item page-item-69"><a href="http://www.examplewebsite.com/contact/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
</ul>
<!-- End: Navigation -->

I'd really appreciate any help, please!

Answer 1

Not sure what all is on your page but this seemed to work with what code you supplied. It's late and not fully tested but give this a shot:

// When you hover over the link in the parent LI...
$('#nav li.nav-parent').mouseover( function() {
self = this;
// ...slide the sub-UL into view, and remove the 'display-list' class
$('#nav li.nav-parent').each(function(){if(self != this)$(this).children('.nav-child').slideUp(1000)});
$(this).children('.nav-child').slideDown(1000).removeClass("display-list");
});

Also make sure to get rid of your mouseout code

Answer 2

OK, thanks for anyone who looked. I've pretty much managed to sort this out now. I've replaced the jQuery block containing mouseover and mouseout with:

$("#nav li.nav-parent").hover(
function () { 
$(this).children('.nav-child').stop(true,true).slideDown(1000).removeClass("display-list"); // fired on mouseover
},
function () {
$(this).children('.nav-child').slideUp(1000); // fired on mouseout
}
);

It's a little jerky if you run the cursor back and forth over it, but it at least works. I'd like to properly stop the animation queue if possible though.

Answer 3

I would suggest to use the splendid accordion (with hover functionality) of jQuery UI: http://jqueryui.com/demos/accordion/#hoverintent