So I have just started developing a theme with _s (underscores) as a basis. For three days straight (almost) I have been trying to make an accordion menu sort of like this:

Example: https://codyhouse.co/demo/multi-level-accordion-menu/animated.html

I know I have to make use of jQuery, but I have never used jQuery before and I do not know how to "integrate" a jQuery script in Wordpress.

I know I have to style the menu accordingly but I am not sure how to do this because it seems as if my php code for the menu* just automatically generates classes

* <?php wp_nav_menu(array( 'theme_location' => 'primary', 'sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu', 'menu_id' => 'primary-menu' ) ); ?>

So basically what I am saying is I want the menu in the example but I have no idea how to do it in wordpress. I don't expect anyone to just hand me the code but to be honest, I would appreciate any help here. I am pretty hopeless and I have really tried my best!

If anyone can help me out I would be much obliged!

This is what I have so far.

header.php

<div class="menu-container">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <?php wp_nav_menu(array(
        'theme_location' => 'primary',
        'sort_column' => 'menu_order',
        'menu' => 'Categories',
        'container_class' => 'main-menu',
        'menu_id' => 'primary-menu'
        ) ); ?>
    </nav><!-- #site-navigation -->
</div><!-- #menu-container -->

style.css (Only the part styling navigation)

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    width: 100%;
}

.main-navigation li {
    float: left;
    position: relative;
    width: inherit;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

.menu-toggle {
    display: none;
}
.main-navigation ul {
    display: block;
}


.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}