jquery toggle menu testing

jquery toggle menu testing Demo

View Demo Full Screen View Demo New Tab

jquery toggle menu testing Code

HTML

<div id="headermenu" class="click-nav">
  <ul class="no-js">
    <li id=""><a href="#!">menu1</a></li>
    <li id=""><a class="have-second-level-menu" href="#!">menu2</a>
      <ul class="sub-menu">
        <li ><a class="have-third-level-menu" href="#!">submenu1></a>
          <ul>
            <li><a href="#!">submenu.1 </a></li>
            <li><a href="#!">submenu.2</a></li>
            <li><a href="#!">submenu.3</a></li>
            <li><a href="#!">submenu.4</a></li>
          </ul>
        </li>
        <li><a href="#!">submenu4</a></li>
        <li ><a class="have-third-level-menu" href="#!">submenu1</a></li>
        <li><a href="#!">submenu7</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

#headermenu {
    width: 90%;
    height: 20%;
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: .5%;
}
#headermenu ul ul {
    display: none;
}
/*#headermenu ul li:hover > ul {
        display: block !important;
    }*/
#headermenu ul {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    list-style: none;
    position: relative;
    display: inline-table;
}
#headermenu ul li {
    width: 100px;
    height: 45px;
    float: left;
    left: 0;
    text-decoration: none;
    text-align: center;
    font-family: century gothic;
    background-color: #fef3e2;
}
#headermenu ul li:hover {
    background: #feaa38;
}
#headermenu ul li:hover a {
    color: #ffffff;
}
#headermenu ul li a {
    color: #feaa38;
    display: block;
    text-decoration: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#headermenu ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
}
#headermenu ul ul li {
    float: none;
    background: #b0c7bd;
    position: relative;
}
#headermenu ul ul li:hover {
    background: #aea7a0;
}
#headermenu ul ul li a {
    color: #ffffff;
}
#headermenu ul ul li a:hover {
    background: #aea7a0;
}
#headermenu ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}
#headermenu:active ul ul {
    display: none;
}

Javascript

$(function () {
  $('.click-nav .no-js .have-second-level-menu').click(function(e) {
     $(this).closest('li').find('.sub-menu').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });

  $('.have-third-level-menu').click(function(e) {
      $(this).closest('li').find('ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
});