Подменю не отображается правильно при наведении

Question

Я сейчас работаю над проектом, и он скоро будет готов. Основная проблема, с которой я столкнулся, заключается в том, что подменю слева от «активного меню» не отображается.

Including a gif to display the problem here

URL-адрес веб-сайта является: www.su.fi

Проблема, которую я имел в своем распоряжении было то, что подменю исчезли после висения, но я решил, добавив;

.sub-nav, .sub-nav > ul { 
 
\t width: 500px !important; 
 
\t box-shadow: none; 
 
\t background-color: #FF008C; 
 
\t display: block; 
 
} 
 

 
#main-nav .act .sub-nav { 
 
\t visibility: visible !important; 
 
\t opacity: 1 !important;

После этого я заметил, что пункты меню слева активного меню не отображаются.

С уважением Thanks!

Было бы очень приятно, если бы кто-то мог внести свой вклад в эту проблему.

Answer 1

Проблема я видел в том, что ваш

#main-nav .act .sub-nav { 
    visibility: visible !important; 
    opacity: 1 !important; 
} 

его над Ли: парить div.sub-нав слоя. Решение может быть воспроизведено с индексом z: На ваш li: over применить z-index: 999; его детям div.sub-nav