open sub and sub-submenu on click

by hannes

HTML

<div id="main-menu">
  <ul>
    <li><a href="http://piirissaareturism.ee/">Home</a></li>
    <li><a href="http://piirissaareturism.ee/kasulik-info/">Information</a>
      <ul class="dropdown-menu">
        <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">Season</a>
          <ul class="dropdown-menu-2">
            <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">Winter</a></li>
            <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">Spring</a></li>
          </ul>
        </li>
        <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">Food</a></li>
      </ul>
    </li>
    <li><a href="http://piirissaareturism.ee/meist/">Contact</a></li>
  </ul>
</div>

CSS

#main-menu {
  margin: 0;
  padding: 0;
  text-align: center;
  height: 50px;
  display: table;
}

#main-menu ul {
  background-color: #fff;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: arial;
  text-align: center;
  line-height: 3.8em;
  font-size: 0.9em;
  text-transform: uppercase;
  display: table-cell;
  vertical-align: middle;
}

#main-menu li {
  background: none;
  padding: 0 10px;
  margin: 0;
  display: inline;
  float: left;
  position: relative;
}

#main-menu li a {
  margin: 0;
  padding: 0;
  font-weight: 400;
  color: #111;
  text-decoration: none;
}

#main-menu ul ul {
  text-align: left;
  line-height: 1.7em;
  font-size: 90%;
  left: 0;
  position: absolute;
  z-index: 610;
  display: none;
}

#main-menu ul ul li {
  margin: 0;
  padding: 0;
  display: block;
  float: none;
 width:170px;
 position: relative;
  z-index: 615;
}

#main-menu ul ul li a {
  background-color: #fff;
  margin: 0;
  padding: 7px 14px;
  text-align: left;
  color: #111;
  border-bottom: 1px solid #ddd;
  display: block;
}

#main-menu ul ul li a:hover {
  background-color: #eee;
  text-decoration: none;
}

#main-menu ul ul ul {
  left: 0;
  position: relative;
  z-index: 620;
  display: none;
}

#main-menu ul ul ul li a {
  background-color: #bbb;
  margin: 0;
  padding: 5px 20px;
  color: #111;
}

JavaScript

$('#main-menu > ul > li:has(.dropdown-menu)').addClass('sub').find('a').on('click', function(event) {
  if ($(event.target).parents('ul.dropdown-menu').length > 0) {
    event.stopPropagation();
  } else {
    event.preventDefault();
  }
  $(this).parent().children('ul').slideToggle();
});

$('#main-menu > ul > li > ul > li:has(.dropdown-menu-2)').addClass('sub-sub').find('a').on('click', function(event) {
  if ($(event.target).parents('ul.dropdown-menu-2').length > 0) {
    event.stopPropagation();
  } else {
    event.preventDefault();
  }
  $(this).find('ul').slideToggle();
});