Как сделать открытие и закрытие подменю на js по нажатию?

Question

[Stacy None]

Есть меню, самое простое

.sub-menu
{
  display: none;
}
.main-item:focus ~ .sub-menu,
.main-item:active ~ .sub-menu,
.sub-menu:hover
{
  display: block;
}

<a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a>
<ul class="sub-menu">
  <li><a href="#1">подпункт 1</a></li>
  <li><a href="#2">подпункт 2</a></li>
  <li><a href="#3">подпункт 3</a></li>
</ul>

Проблема в том что после открытия, меню уже не закрывается если нажать на кнопку снова. Как это подправить?
И можно ли сделать так чтобы при открытии с боку была стрелочка вниз а в закрытом режиме в верх?
Заранее спасибо!

Comments

[Максим Тимофеев]

Алексей Глинский, у него все на css