Superfish Menu Dropdown Animations

Question

I'm using superfish menu for drop-down animations I added animate.css plugin problem is when I apply animation after animation complete drop-down disappear I want to stay dropdown few sec.Using jquery Is there any other way add or Remove class.

Thanks in Advance.

$(document).ready(function(){
  $('.sf-menu').superfish();
});

/*===========================
  superfish css 
==============================*/

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
 margin: 0;
 padding: 0;
 list-style: none;
}
.sf-menu li { position: relative; }
.sf-menu ul {
 position: absolute;
 display: none;
 top: 152%;
 left: 0;
 z-index: 99;
}
.sf-menu > li { float: left; }
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
 display: block;
}
.sf-menu a {
 display: block;
 position: relative;
 transition: all 0.2s linear;
}
.sf-menu ul ul {
 top: 0;
 left: 100%;
}
/***SKIN ***/
.sf-menu {
 float: left;
}
.sf-menu ul {
 /*box-shadow: 2px 2px 6px rgba(0,0,0,.2);*/
 min-width: 12em; 
 *width: 12em;
 color: #ffffff; 
}
.sf-menu a {
 padding: .75em 1em;
 text-decoration: none;
}
.sf-menu a {
    font-weight: 500;
 text-transform: UPPERCASE;
    color: #555555;
}
.sf-menu li {
 background: ;
 white-space: nowrap;
 *white-space: normal; 
 -webkit-transition: background .2s;
 transition: background .2s;
}
.sf-menu li li a {
 padding: 14px 15px;
 border: 1px solid #e8e2e2;
 background-color: #ffffff;
}
.sf-menu li li a:focus, 
.sf-menu li li a:hover, 
.sf-menu li li a:active {
    color: #ffffff;
    background-color: #00d2c7;
}
/*.sf-menu li:hover,
.sf-menu li.sfHover {
 background: #ffffff;
 -webkit-transition: none;
 transition: none;
}*/
.header-box .sf-arrows .sf-with-ul:after {
    top: 20px;
    right: -10px;
}
.sf-arrows .sf-with-ul:after {
    position: absolute;
    content: '\f107';
    font-family: 'FontAwesome';
    padding-right: 14px;
    right: -12px;
    top: 57%;
    font-size: 12px;
    margin-top: -8px;
}

<link href="https://fastcdn.org/Animate.css/3.4.0/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.9/js/superfish.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.8.1/jquery.hoverIntent.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="primary-menu">
     <ul class="sf-menu">
    <li class="current"><a href="#">Headers</a>
     <ul class="sub-items animated lightSpeedOut">
      <li><a href="#">sub menu</a></li>
      <li><a href="#">sub menu</a></li>
      <li><a href="#">sub menu</a></li>
      <li><a href="#">sub menu</a></li>
      <li><a href="#">sub menu</a></li>
      <li><a href="#">sub menu</a></li>
     </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact Us</a></li>
   </ul>
  </div><!--primary menu-->