Javascript menu with dropDown and Slide effects

Over the last couple of weeks we build a huge Javascript menu. And we might think the whole code is a little bit too much. We are not pros, but came to a quit acceptable solution. (yeah it´s German, we know)

We used jQuery-3.1.1. and jQeury-ui.

I´ll put a short overview of the menu at the end.

The question is, can we simplify the whole thing or not.

Example HTML:

<div id="hintergrundbreite">
    <div class="container cont_navmenu">
        <div id="listHome" class="navlevel navlevel1 pull-right col-xs-12 col-sm-6 col-md-3 col-lg-3">

            <ul>
                <li>
                    <a href="">
                        <div class="navUberblick">Home</div>
                    </a>
                </li>

                <li class="navMarkteUndGeschaftsfelder ">
                    <a href="">
                        <div class="navUberblick ClickMarkteUndGeschaftsfelder"><span class="menuPfeilLinks icon-left-open-big"></span>Branchen &amp; Geschäftsfelder
                            <span class="menuPfeilRechts icon-right-open-big"></span></div>
                    </a>
                    <div id="listMarkteUndGeschaftsfelder" class="hiddennav navlevel navlevel2 pull-left col-xs-12 col-sm-6 col-md-3 col-lg-3">
                        <div><i class="icon-right-open-big backbutton MarkteUndGeschaftsfelderBackbutton icon-left"></i></div>
                        <ul>
                            <a href="">
                                <div class="navUberblick">Märkte im Überblick</div>
                            </a>
                            <li class="lucke"></li>
                            <li class="navAutomotive">
                                <a href="">
                                    <div class="navUberblick ClickAutomotive"><span class="menuPfeilLinks icon-left-open-big"></span> Automotive
                                        <span class="menuPfeilRechts icon-right-open-big"></span></div>
                                </a>
                                <div id="listAutomotive" class="hiddennav navlevel navlevel3 pull-right col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                    <div><i class="icon-right-open-big backbutton2 AutomotiveBackbutton icon-left-open-big icon-left"></i></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

Example CSS:

     .navlevel {
        display: none;
        z-index: 200;
        height: 100%;
        padding: 0;
        background: #fff;
    }

    .navlevel li {
        list-style: none;
        background-color: #fff;
        text-align: right;
        color: #676c71;
    /*    padding-left: 35px;*/
    }

    .navUberblick {
        padding: 20px;
    }



    .navlevel li:hover {
        color: #337ab7;
    }

    .hiddennav {
        height: 100%;
    }

    .expand {
        display: block !important; 
    }


    .menuPfeilLinks {
        padding: 0;
        margin: 0;
        float: left;
        font-size: 1.1em;
        padding-left: 25px
    }
    .overflow {
        overflow: hidden;
    }

    .cont_navmenu {
        height: 100%;
    }


    .hohe {
        height: 100% !important;
    }

    .hiddennav li:first-child {
        padding-top: 60px
    }


    #hintergrundbreite {
    /*    height: 100%;*/
        width: 100%;
        background: rgba(255, 255, 255, 0.50);
    }

    .backbutton,
    .backbutton2,
    .backbutton3 {
        visibility: hidden;
        float: left;
        font-size: 25px;
        padding-left: 35px;
        padding-top: 10px;
    }
.navlevel2,
.navlevel3,
.navlevel4 {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
}

Example JS:

    if ((($(window).width() > 970) && test == 90) || (($(window).width() > 970))) {
        /*TODO: farbenklasse wird zwar entfernt, bootstrapp überschreibt aber noch was. Evtl alle mal drüber schauen */

        $(".navlevel2").hide();
        $(".navlevel3").hide();
        $(".navlevel4").hide();




        $('.navlevel').removeClass("moveRightLvl2");
        $('.navlevel').removeClass("moveRightLvl3");




        $(function () {


            /*HIDE FUNKTION UNBEDINGT IMPLEMENTIEREN, UM ANDERE EBENEN ZU SCHLIESSEN*/
            $(".ClickMarkteUndGeschaftsfelder").click(function () {

                /*Highlight Klasse nachdem es angeklickt wurde*/

                $('#listHome li a div:not(#listMarkteUndGeschaftsfelder li a div, #listAllgemeinerMaschinenbau li a div, #listAnlagenbau li a div, #listAutomotive li a div)').removeClass("activeFarbe");
                $(this).addClass("activeFarbe");                

                $('#listHome li:not(.navMarkteUndGeschaftsfelder, #listMarkteUndGeschaftsfelder li, #listAutomotive li)').removeClass("activePfeil");
                $(".navMarkteUndGeschaftsfelder").addClass("activePfeil", 400);

                /*hier wird durch jedes im Tabletmodus klickbares Element die Move Klasse entfernt. Dies ist wichtig, um Kompikationen beim Wechsel zwischen Tablet Hochkant und quervormat zu vermeiden*/
            if ((($(window).width() > 970) && test == 90) || (($(window).width() > 970))) {
                $('.navlevel').removeClass("moveRightLvl2");            
                $('.navlevel').removeClass("moveRightLvl3");
            }
                /* Hier noch restlichen Hide()-Funktionen */
                $(".navlevel2:not(#listMarkteUndGeschaftsfelder)").hide();
                $(".navlevel3:not(#listAutomotive, #listAllgemeinerMaschinenbau, #listAnlagenbau)").hide();
                $(".navlevel4:not(#listAuto1)").hide();

                $("#listMarkteUndGeschaftsfelder").show("slide", {direction: "right"}, 350);
                return false;
            });

We can also put the whole thing on a test-server if necessary.