Vertical jquery menu

HTML

<html>
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
  <header><h1>Logo</h1>
  </header>
  <nav id="vertical-menu">
    <ul class="main-menu">
      <li class="active"><a href="#"><i class="fa fa-envelope"></i>Link Item 1</a></li>
      <li class="contain-submenu"><a href="#"><i class="fa fa-desktop"></i>Link Item 2 </a>
        <ul class="submenu-1">
          <li><a href="#">Submenu item 1</a></li>
          <li class="contain-submenu" ><a href="#">Submenu item 2</a>
             <ul class="submenu-2">
               <li><a href="#">Submenu item 2.1</a></li>
               <li><a href="#">Submenu item 2.2</a></li>
               <li><a href="#">Submenu item 2.3</a></li>
               <li><a href="#">Submenu item 2.4</a></li>
               <li><a href="#">Submenu item 2.5</a></li>
               
             </ul>
          
          
          </li>
          <li><a href="#">Submenu item 3</a></li>
          <li><a href="#">Submenu item 4</a></li>
          <li><a href="#">Submenu item 5</a></li>
        </ul>
      
      </li>
      <li><a href="#"><i class="fa fa-cog"></i>Link Item 3</a></li>
      <li class="contain-submenu"><a href="#"><i class="fa fa-book"></i>Link Item 4</a>
         <ul class="submenu-1">
          <li><a href="#">Submenu item 1</a></li>
          <li><a href="#">Submenu item 2</a></li>
          <li class="contain-submenu"><a href="#">Submenu item 3</a>
           <ul class="submenu-2">
             <li><a href="#">Submenu item 3.1</a></li>
             <li class="contain-submenu"><a href="#">Submenu item 3.2</a>
               <ul class="submenu-3">
                 <li><a href="#">Submenu item 3.2.1</a></li>
                 <li><a href="#">Submenu item 3.2.2</a></li>
                 <li><a href="#">Submenu item 3.2.3</a></li>
                 <li><a href="#">Submenu item 3.2.4</a></li>
                 <li><a href="#">Submenu...

CSS

/*custom font for text*/
 @import url(http://fonts.googleapis.com/css?family=Nunito);

/*Basic reset*/
 * {
    margin: 0;
    padding: 0;
}
body {
    background: #4EB889;
    font-family: Nunito, arial, verdana;
}
#vertical-menu {
    background: #004050;
    width: 250px;
    margin: 100px auto 0 auto;
    color: white;
    /*box-shadow: 
		0 5px 15px 1px rgba(0, 0, 0, 0.6), 
		0 0 200px 1px rgba(255, 255, 255, 0.5);*/
}
/*heading styles*/
 #vertical-menu h3 {
    font-size: 12px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    background: #003040;
    background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
 #vertical-menu h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
 #vertical-menu h3 span {
    font-size: 16px;
    margin-right: 10px;
}
/*list items*/
 #vertical-menu li {
    list-style-type: none;
}
/*links*/
 #vertical-menu ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 11px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    /*transition for smooth hover animation*/
    transition: all 0.15s;
}
/*hover effect on links*/
 #vertical-menu ul ul li a:hover {
    background: #003545;
    /*border-left: 5px solid lightgreen;*/
}
/*Lets hide the non active LIs by default*/
 #vertical-menu ul ul {
    display: none;
}
#vertical-menu li.active ul {
    display: block;
}