Как скрыть дополнительное меню под сайтбар при клике?

Question

[Catcop]

Дело в том что если скрыть ul в .sub-menu, то сам .sub-menu остается (на скриншоте).

Сам .sub-menu скрыть не удается, так как он идет поверх сайтбара.

Comments

[Smoke_qq]

overflow: hidden; //////без нее тень не скрывается
Убрать у ul box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.5);

Сам .sub-menu скрыть не удается, так как он идет поверх сайтбара

display: none;

[Catcop]

Smoke_qq, если ставить display: none; , то не будет плавной анимации скрытия

[Smoke_qq]

Catcop, Убрать в .sub-menu при закрытом меню right: -260; а при открытии устанавливать right: -260;
Что то типо такого

[Catcop]

Smoke_qq, то есть ставить settimeout чтобы поставить display block .sub-menu на время равное анимации? Это не костыльное решение? Просто кажется, что можно сделать как-то более лаконичней.

[Smoke_qq]

Catcop, как то не очень получается что саб меню при клике тоже будет открыто

[Catcop]

Smoke_qq, пока вот что получилось
https://jsfiddle.net/maed1w9s/

Он плавно скрывается и раскрывается, но тень все равно проглядывается и с блоком .sub-menu тоже нужно что-то сделать

Answer 1

[Александр Осадчий]

Постатьвте при скрытом положении отрицательный z-index

Comments

[Catcop]

не помогает, тень все равно не может спрятаться за родительский список, вот как пока получается:
https://jsfiddle.net/maed1w9s/