JQuery problem of a MENU with two <ul> ’s

Question

I’m having a problem with a menu.

It turns out that when the person hovers the mouse on the link Attending, happens a dropdown, the menu appears because it is with display:none and when it passes the mouse gets display:block.

So far so good, only I’m having a problem, I need it to happen with more than one <ul>. Only at 1° <ul> is receiving this effect.

I want that when the person hovers the mouse over the link Attending, such an effect occurs in 2 or plus <ul> 'Then I’ll be able to do it like a Mega Menu.

Code of Menu | HTML:

                    <li>
                        <a href="blog.html">Atendimento</a>
                        <ul><!-- Primeiro | No caso o .first() -->
                            <li><a href="base.html">Base de Conhecimento</a></li>
                            <li><a href="blog.html">Nosso Blog</a></li>
                            <li><a href="contato.php">Fale conosco</a></li>
                            <li><a href="suporte.html">Suporte</a></li>
                        </ul>
                        <ul><!-- Segundo | Não funciona -->
                            <li><a href="base.html">Base de Conhecimento</a></li>
                            <li><a href="blog.html">Nosso Blog</a></li>
                            <li><a href="contato.php">Fale conosco</a></li>
                            <li><a href="suporte.html">Suporte</a></li>
                        </ul>
                    </li>

Code of Menu | jQuery:

jQuery("#menu > li").hover(function() {
        jQuery(this).find("ul").first().slideDown(600);
    }, function() {
        jQuery(this).find("ul").first().slideUp(200);

    });

    jQuery("#menu li ul li").hover(function() {
        jQuery(this).find("ul").first().toggle(0);

    });

    jQuery("#menu li ul li").each(function() {
        if(jQuery(this).has("ul").length > 0) {
            jQuery(this).addClass("menu-arrow")
        }
    });

I believe the problem lies in .first() = first (in Portuguese), in case only works with the first <ul>, but I need it to work with both <ul>.

Note: I tried to remove the .first(), but he left the whole menu bugged. (I’m still a beginner)

Answer 1

According to the template you passed me by chat, your second UL is A’s child, so jquery had to be adapted:

HTML:

<ul id="menu">
    <li> <a href="blog.html">Atendimento</a>

        <ul>
            <li><a href="base.html">Base de Conhecimento</a></li>
            <li><a href="blog.html">Nosso Blog</a></li>
            <li><a href="contato.php">Fale conosco</a></li>
            <li> <a href="suporte.html">Suporte
                    <ul>
                        <li><a href="base.html">Base de Conhecimento</a></li>
                        <li><a href="blog.html">Nosso Blog</a></li>
                        <li><a href="contato.php">Fale conosco</a></li>
                        <li> <a href="suporte.html">Suporte</a></li>
                    </ul>
                </a>
            </li>
        </ul>
    </li>
</ul>

jquery:

$("#menu").find('li').hover(function () {
    $(this).children('ul').clearQueue().slideDown(600);
    $(this).children('a').children('ul').clearQueue().fadeIn(600);
}, function () {
    $(this).children('ul').slideUp(600);
    $(this).children('a').children('ul').fadeOut(600);
});

$("#menu").find('a').has( "ul" ).each(function() {
    $(this).addClass("menu-arrow");
});

That is, any LI that has a son UL and also any LI that has a son A that has a son UL, will trigger the events, showing the UL and then hiding again.

jsfiddle http://jsfiddle.net/jaderw/p83s8zL6/7/

Answer 2

My suggestion is to do this only with CSS.

ul  ul {
    display: none;
}

ul > li:hover ul {
    display: block;
}

Example: http://jsfiddle.net/n6ty5jut/

I could even do with CSS animation:

ul  ul {
    opacity: 0;
    transition: opacity 1s;
}

ul > li:hover ul {
    opacity: 1;
}

Example: http://jsfiddle.net/n6ty5jut/1/