Decode,
Структура:

<div>
      <ul>
         <li>

Новые стили и html меню я и сама написать могу. Дело тут в том, чтобы сохранить имеющееся ("прилипающую стрелку", стиль). Если в CSS hover эффект поменять на active, меню открывается по клику, но тут же секунду в секунду скрывается => дело в JS.

SnezhanaLast, для начала html измените.



Не надо active, впрочем, как и hover.

Decode,
Обновила, посмотрите, с такой проблемой столкнулась.

SnezhanaLast, уберите :active. В таблицу стилей добавьте класс submenu-hide, который будет скрывать под-меню. Вставьте скрипт к себе:

var menu = document.querySelector('.page-sidebar-menu'),
    subMenu = document.querySelectorAll('.sub-menu'), current;

menu.onclick = function(e) {
  if ( !e.target.parentNode != this ) return;

  current = e.target.querySelector('.sub-menu');

  [].forEach.call(subMenu, function(item) {
    if (item == current) return;

    item.classList.add('submenu-hide');
  });

  current.classList.toggle('submenu-hide');
};

menu.onmousedown = menu.onselectstart = function() {
  return false;
};

Спасибо Вам большое! Выручили :)

Ой. Сделала, а белиберда получилась. :(
В чем косяк?

SnezhanaLast,

Я добавила.

.submenu-hide {
  display: none;
}

SnezhanaLast, этого мало, надо еще элементам <ul> добавить, которые submenu.

<ul class="sub-menu submenu-hide">

Decode,

.submenu-hide {
  display: none;
}
.sub-menu .submenu-hide {
  display: none;
}
.sub-menu .submenu-hide ul {
  display: none;
}

Сделала вот так, но результат тот же самый. :(