Имею меню как ниже, html менять не могу ( могу только добавить css - before или after например)
Задачи две -
1. Нужно открывать подменю при клике, и так чтобы другое открытое подменю не закрывалось
2. Как закрыть открытое подменю при клике на основной пункт меню
вот пример
здесь меню
но тут только открывается при клике
использую
.sub-menu
{
display: none;
}
.menu-item:focus ~ .sub-menu,
.menu-item:active ~ .sub-menu,
.sub-menu:hover
{
display: block;
}
вот меню
<div class="menu-top-menu-left-container">
<ul class="menu">
<li class="menu-item">
<a title="Бонусная программа " href="#">Бонусы</a>
<ul class="sub-menu">
<li class="menu-item">
<a title="Сборник рецептов" href="#">Рецепты</a></li>
</ul>
</li>
<li class="menu-item">
<a title="Ждем ваших предложений о сотрудничестве" href="#">Сотрудничество</a>
<ul class="sub-menu">
<li class="menu-item">
<a title="Если вы поставщик" href="#">Поставщикам</a>
</li>
<li class="menu-item">
<a title="Если вы покупатель" href="#">Покупателям</a>
</li>
</ul>
</li>
</ul>
</div>