Как сделать кнопку Гамбургер для открывания меню?

Коллеги, Молю помогите. Имею большой опыт. Но кажется с простой задачей справится не могу.
-Имеется в углу экрана кнопка гамбургер.
-При нажатии на которую открывается меню.
Работало просто. Делаю любой тег в виде кнопки, и вешаю на него :HOVER.
Меню же открывается после наведения на тег в виде кнопки.
То теперь надо усложнить задачу. надо чтобы после открытия меню тег в виде кнопки превращался в кнопку с крестиком.
Т.е. надо так чтобы после срабатывания :HOVER, тег само собой меняет иконку, но при этом чтобы при нажатии на иконку меню закрывалось.

HTML:

1. <div class=menu>
2.   <div class=icon>
3.     <ul>
4.       <li><a>Пункт меню 1
5.       <li><a>Пункт меню 2
6.     </ul>
7.   </div>
8. </div>

Код (CSS):

1. .icon{
2.   width: 40px; height: 40px;
3.   position: relative;
4. }
5. .icon ul{
6.   position: absolute;
7.   top: 100%;
8.   display: none;
9. }
10. .icon:hover{
11.   display: block;
12. }

Как видно простая схема открывания меню при наведении.
.
Но как сделать чтобы изначальная иконка меняла свое поведение после клика на открытие меню?
Кликабельность иконки все равно из чего делать, из внутреннего DIV или из внешнего значения не имеет.

 

Добавлено:
хочу сделать меню для смартфона
https://gesor.ru/index.php
Там слева открывается гамбургер на маленьком экране
.
суть в том что сейчас клик пальцем по экрану в пустое не активное место расценивается как ховер.
ну в общем
при первом клике пальцем на гамбургере открывается меню. А при втором клике на гамбургере меню должно закрыватся

 

Это я умею, меня интересует решение проблемы способами без JS и без добавления checkbox`а.