Menu Lateral

<nav class="side-menu">
 <ul>
     <li><a href="#">LINK 1</a></li>
     <li><a href="javascript:void(0);">LINK 2<i class="icone-more">&nbsp;</i></a>
     <ul class="sub-menu">
         <li><a href="#">- Link 3.1</a></li>
         <li><a href="#">- Link 3.2</a></li>
         <li><a href="#">- Link 3.3</a></li>
         <li><a href="#">- Link 3.4</a></li>
     </ul>
     </li>
     <li><a href="javascript:void(0);">LINK 3<i class="icone-more">&nbsp;</i></a>
     <ul class="sub-menu">
         <li><a href="#">- Link 3.1</a></li>
         <li><a href="#">- Link 3.2</a></li>
         <li><a href="#">- Link 3.3</a></li>
         <li><a href="#">- Link 3.4</a></li>
     </ul>
     </li>
     <li><a href="#">LINK 4</a></li>
     <li><a href="#">LINK 5</a></li>
 </ul>
 </nav>

nav.side-menu{

    max-width: 321px;

}

nav.side-menu > ul > li{

    padding: 6px 0px;

    border-bottom: 1px solid rgba(42, 42, 42,0.4);

}

nav.side-menu > ul > li:last-child{

    border-bottom: none;

}

nav.side-menu > ul > li > a,

nav.side-menu > ul > li{

    font-size: 14px;

    font-family: "latobold";

    color: #2A2A2A;

}

nav.side-menu > ul > li:hover > a,

nav.side-menu > ul > li.active > a{

    color: #fff;

    background: #2980b9;

}

nav.side-menu > ul > li.active i.drop-icon{

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(-90deg) !important;

    display: inline-block;

}

nav.side-menu > ul > li > a{

    padding: 10px 10px;

    display: block;

}

nav.side-menu > ul > li .sub-menu{

    display: none;

}

nav.side-menu > ul > li .sub-menu li{

    padding: 6px 10px;

    line-height: 16px;

}

nav.side-menu > ul > li .sub-menu li:hover{

    background: #D0D2D3;

}

nav.side-menu > ul > li .sub-menu li a{

    font-size: 14px;

    font-family: "latoregular";

    color: #808184;

    display: block;

}

nav.side-menu > ul > li .sub-menu li:hover a{

    color: #2980B9;

}

nav.side-menu > ul > li i{

    font-size: 6px;

    margin-left: 5px;

}

$(document).on("click", ".side-menu > ul > li", function(e){

    if($(this).find('.sub-menu').length>0){

        e.preventDefault();

        e.stopPropagation();

        $(this).toggleClass('active');

        $(this).find('.sub-menu').stop().slideToggle();

    }

    

});

<nav class="side-menu menu-icon">

<ul>

    <li><a href="#"><i class="icon-mouse">&nbsp;</i>LINK 1</a></li>

    <li><a href="javascript:void(0);"><i class="icon-mouse">&nbsp;</i>LINK 2<i class="icone-more drop-icon">&nbsp;</i></a>

    <ul class="sub-menu">

        <li><a href="#">- Link 3.1</a></li>

        <li><a href="#">- Link 3.2</a></li>

        <li><a href="#">- Link 3.3</a></li>

        <li><a href="#">- Link 3.4</a></li>

    </ul>

    </li>

    <li><a href="javascript:void(0);"><i class="icon-mouse">&nbsp;</i>LINK 3<i class="icone-more drop-icon">&nbsp;</i></a>

    <ul class="sub-menu">

        <li><a href="#">- Link 3.1</a></li>

        <li><a href="#">- Link 3.2</a></li>

        <li><a href="#">- Link 3.3</a></li>

        <li><a href="#">- Link 3.4</a></li>

    </ul>

    </li>

    <li><a href="#"><i class="icon-mouse">&nbsp;</i>LINK 4</a></li>

    <li><a href="#"><i class="icon-mouse">&nbsp;</i>LINK 5</a></li>

</ul>

</nav>

nav.side-menu{

    max-width: 321px;

}

nav.side-menu > ul > li{

    padding: 6px 0px;

    border-bottom: 1px solid rgba(42, 42, 42,0.4);

}

nav.side-menu > ul > li:last-child{

    border-bottom: none;

}

nav.side-menu > ul > li > a,

nav.side-menu > ul > li{

    font-size: 14px;

    font-family: "latobold";

    color: #2A2A2A;

}

nav.side-menu > ul > li:hover > a,

nav.side-menu > ul > li.active > a{

    color: #fff;

    background: #2980b9;

}

nav.side-menu > ul > li.active i.drop-icon{

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(-90deg) !important;

    display: inline-block;

}

nav.side-menu > ul > li > a{

    padding: 10px 10px;

    display: block;

}

nav.side-menu > ul > li .sub-menu{

    display: none;

}

nav.side-menu > ul > li .sub-menu li{

    padding: 6px 10px;

    line-height: 16px;

}

nav.side-menu > ul > li .sub-menu li:hover{

    background: #D0D2D3;

}

nav.side-menu > ul > li .sub-menu li a{

    font-size: 14px;

    font-family: "latoregular";

    color: #808184;

    display: block;

}

nav.side-menu > ul > li .sub-menu li:hover a{

    color: #2980B9;

}

nav.side-menu > ul > li i{

    font-size: 6px;

    margin-left: 5px;

}

nav.side-menu.menu-icon > ul > li i:first-child{

    font-size: 20px;

}

$(document).on("click", ".side-menu > ul > li", function(e){

    if($(this).find('.sub-menu').length>0){

        e.preventDefault();

        e.stopPropagation();

        $(this).toggleClass('active');

        $(this).find('.sub-menu').stop().slideToggle();

    }

    

});