Как скрыть элементы меню (см. сайт)?

#menu-item-2268 ul.sub-menu {display: none;}

Потом делаем так, чтобы ссылка в пункте родителе не занимала 100% ширины экрана.

#menu-item-2268 > a {display: inline-block; width: auto;}

Ну и скриптом сворачиваем / разворачиваем подпункт меню при клике на область справа.

<script>
$(document).ready(function(){
$("#menu-item-2268").click(function () {

$("#menu-item-2268 ul.sub-menu").slideToggle("fast");

});
});
</script>

Ну и дальше  для этого самого <li  id="menu-item-2268" задаем фон и  border-bottom. Можно добавить галочку " v " чтобы посетители поняли, что это именно меню. Да, код можно написать более универсальный и без ID, но мне лень. ))

Более простой способ - сразу добавить скрипт открытия меню,  пропуская другие пункты. А ссылку раздела сделать некликабельной через

#menu-item-2268 > a {pointer-events: none;}

Спасибо за подробный ответ! 
Только скрипт почему-то не работает.

Он под JQuery. По идее, для работы на сайте должен быть JQuery. Без него... ну только добавлять класс по клику и показывать меню, если класс есть.

document.getElementById('menu-item-2268').addEventListener('click', function() {
  this.classList.toggle('show');
});

и добавить стили

#menu-item-2268.show ul.sub-menu {display: block;} 

Через консоль проверял - работает. Если не будет - добавьте куда-то  ниже меню в коде.

Подключил JS и всё заработало :)

Еще один момент, может, подскажешь: там два подменю - то есть, нужен еще один подуровень (см. скрин): Услуги >  подменю "Лечение зубов" > еще три подменю: "Лечение кариеса" и др 
Это вообще возможно сделать? У этих подменю одинаковый класс, если я правильно понимаю...

Ну давайте попробуем все с нуля собрать на классах:

#menu-amp .menu-item-has-children ul.sub-menu {display: none !important;}
#menu-amp .menu-item-has-children.show > ul.sub-menu {display: block !important;}
#menu-amp .menu-item-has-children {position: relative;background: #fafafa;border-bottom: 1px solid #efefef;}
#menu-amp .menu-item-has-children:after {content: ""; border: 5px solid transparent; border-top: 5px solid #b3b3b3; position: absolute; right: 12px; top: 21px; transition: transform 300ms;}
#menu-amp .menu-item-has-children.show:after {transform: rotate(90deg);}
#menu-amp .menu-item-has-children > a {display: inline-block; width: auto; border-bottom: none;}

И скриптом перебрать все нужные элементы

var elements = document.getElementsByClassName("menu-item-has-children");
var myFunction = function(event) {
event.stopPropagation();
this.classList.toggle("show");
};

for (var i = 0; i < elements.length; i++) {elements[i].addEventListener('click', myFunction, false);}

Не уверен, что все прямо 100% правильно, но через консоль работает.

А из предыдущего кода нужно что-то удалять? Или просто добавить этот?
Если просто добавить, то не сработало :(

Всё работает, большая благодарность.
И последний штрих - можно ли сдвинуть вправо элементы подменю? То есть, чтобы подменю не строго под заголовком выпадало.
Класс у них один, не понимаю, как переназначить. 

На фото оно и так сдвинуто. 

Вот можете прямо идти по вложенности до куда надо и все:

#menu-amp > li > .sub-menu {
padding-left: 40px;
}

Или может даже 

#menu-amp > li > .sub-menu > li {