jQuery drop down--hover for additional classes?

Question

This is my jquery for a simple drop-down-esq menu. I'm having trouble, though. I want the div that slides down when the user hovers over the .mainMenuDiv to stay down when they are hovering over the .SubMenu div also!

Help! :)

    $(function () {
            var tabContainers = $('div.subMenu > div');
            tabContainers.hide();

            $('.mainMenuDiv a').hover(
            function () {
                tabContainers.filter(this.hash).stop(true, true).slideDown();
            },
            function(){
                tabContainers.filter(this.hash).stop(true, true).slideUp();
            });
    });


<div class="mainMenu" align="center">
    <table cellpadding="0" cellspacing="0" border="0" width="950">
        <tr>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/new/#new" class="mainMenuLink" id="1">I'm New</a></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/ministries/#ministries" class="mainMenuLink">Ministries</a></div></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/beliefs/#beliefs" class="mainMenuLink">Beliefs+Mission</a></div></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/listen/#listen" class="mainMenuLink">Listen</a></div></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/connect/#contact" class="mainMenuLink">Connect</a></div></td>
            <td width="100%"></td>
        </tr>
    </table>
</div>
    <div class="subMenu">
        <div id="new">
            <h2>I'm New</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

I know the HTML isn't great...but this is what I HAVE to work with...

Answer 1

I'm not sure if i understand you correctly, but you can chain selectors together using a simple comma.

So perhaps this will work

$('.mainMenuDiv a, div.subMenu > div').hover(

If I'm missing something please post your HTML code too.

Answer 2

If I understand correctly, I think you will need to use just the mouseover event as opposed to hover, e.g.:

$(function () {
        var tabContainers = $('div.subMenu > div');
        tabContainers.hide();

        $('.mainMenuDiv a').mouseover(function() {

            //hide all the containers
            tabContainers.slideUp();

            //slide this one down
            tabContainers.filter(this.hash).stop(true, true).slideDown();
        });

        //slide up the container when the mouse is over anything else
        $('body :not("div.subMenu > div, .mainMenu a")').mouseover(function() {
            tabContainers.slideUp();
        });
});

Now, the 'current' one will stay open until the mouse hits another link.