submenu demo

HTML

<ul id="menu">
    <li><a>Menu 1</a></li>
    <li>
      <a class="link">Menu 2</a>
      <ul class="hidden">
        <li><a>submenu 1</a></li>
        <li><a>submenu 2</a></li>
      </ul>
    </li>
    <li>
      <a class="link">Menu 3</a>
      <ul class="hidden">
        <li><a>submenu 1</a></li>
        <li><a>submenu 2</a></li>
      </ul>
    </li>
        <li>
      <a class="link">Menu 4</a>
      <ul class="hidden">
        <li><a>submenu 1</a></li>
        <li><a>submenu 2</a></li>
      </ul>
    </li>
  </ul>

SCSS

.hidden{
  display: none;
}
.active_submenu{
  display:block;
}
.hidden:hover u{
  display: block;
}

JavaScript

$('.link').on('click', function(e){
    e.preventDefault(); // сброс ссылку на действие по умолчанию, иногда позволяет закрыть некотрые ошибки
    var _s = $(this); // контекст вызова, т.е. A по которой кликнули
    var _ul = $(_s).next(); // $(_s).next() - вернут UL который лежит за A , по которому кликнули
    if($(_ul).hasClass('active_submenu')){ // проверяем, если это клик по текущему пункту, то закрываем его
    	$(_ul).toggleClass('active_submenu hidden'); // toggleClass - меняем класс с active_submenu на hidden
    }else{
        $('#menu').find('ul.active_submenu').toggleClass('active_submenu hidden'); // удаляем другие активные меню
    		$(_ul).toggleClass('hidden active_submenu'); // меняем класс
    }
});