I'm trying to create a megamenu on my site and trigger it via jquery to slide down on li click and such.

Find my HTML below as a guide, followed by my Jquery.

               <nav class="nav-left">
                <a class="top-menu" href="">Search</a>

                <ul>
                                            <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-77 menu-item-has-children">
                        <a class="underline-animation" href="/junior/">Junior</a>
                    </li>
                                            <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-78">
                        <a class="underline-animation" href="/senior/">Senior</a>
                    </li>
                                            <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-79">
                        <a class="underline-animation" href="/sixth/">Sixth</a>
                    </li>
                                            <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                        <a class="underline-animation" href="/admissions/">Admissions</a>
                    </li>
                                        </ul>
                                </nav>

Megamenu

<div class="megamenu { current jquery puts li click into here but doesnt remove the old one }"> content here </div>

jquery

  $('ul li.menu-item').click(function () {
var nav_name = $(this).text();
event.preventDefault();

$(".megamenu").slideDown();
$(".megamenu").toggleClass(nav_name);

});

I was wondering if the jquery i am using is going in the right direction or is there a better way for me to build this.

i'm using wordpress.