<div class="toper_mobile">
        <div class="flex-container">
            <div class="mobile-menu-wrapper block-menu mobile-menu">
                <div class="top_menu">
                    <ul class="menu">
                        
                        <li class="dropdown"><a class="opct" data-toggle="dropdown-false" href="#pp5">PARTNERS<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a class="opct" href="#pp5">Technology partners</a></li>
                                <li><a class="opct" href="#pp8">System integrators</a></li>
                            </ul>
                        </li>
                        <li class="dropdown"><a class="opct" href="#pp6">PROJECTS<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a class="opct" href="#pp9">News</a></li>
                                <li><a class="opct" href="#pp10">Contacts</a></li>
                            </ul>
                        </li>
                    </ul>

                </div>

            </div>
        </div>
    </div>

.mobile-menu {
        position: fixed;
        padding: 50px;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        z-index: 100;
        overflow: auto;
        background-repeat: no-repeat;
        background-color: #272727;
      

    }
.dropdown-menu {
       position: relative;
    float: none;
      background-color: transparent;
    min-width: inherit;
    border: 0px;
    box-shadow: none;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    border: 0px ;
    border-radius: 0px;
}
.toper_mobile .dropdown-menu {
    position: relative;
    float: none;
}
.mobile-submenu-active, .toper_mobile .menu > li.dropdown > a:hover{
  color:#fff;
}
ul.menu {
    display: block;
    width: 100%;
    margin: 0 auto;
}
 .toper_mobile ul.menu li {
        padding: 15px 20px 0px 0px;
    }

    .toper_mobile ul.menu li .dropdown-menu li {
        padding-left: 20px;
    }
.toper_mobile ul.menu li {
    padding: 15px 20px 0px 0px;
}

    $(".dropdown > a").on("touchstart click", function (e) {
        e.preventDefault();
        console.log( $(this).hasClass('mobile-submenu-active') );
        if($(this).hasClass('mobile-submenu-active')){
            $(this).removeClass("mobile-submenu-active"); 
            $(this).next('.dropdown-menu').slideToggle(300);       
        }else{
            $(this).closest('.menu').find(".dropdown-menu").slideUp(300);  
            $(this).closest('.menu').find(".dropdown a").removeClass("mobile-submenu-active");
            $(this).addClass("mobile-submenu-active");  
            $(this).closest('.dropdown').find(".dropdown-menu").slideDown(300);   
        }



    });