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

Question

Я пытаюсь создать «меню навигации для мобильных устройств».

Я следую за этим CSS Dropdown Menu (смотрите пункт меню CSS Drop Down и его ресурсы).

Когда я нажимаю кнопку «Меню», чтобы открыть свое меню, подменю озвучивает кнопку «Меню», поэтому я не могу закрыть меню при его открытии.

Вот мой CSS код:

@media screen and (max-width: 960px) { 
    #access .nav-toggle{ 
     display: inline-block; 
     float: left; 
     position: relative; 
     width:50%; 
    } 

    #menu-navigazione { 
     position: absolute; 
     z-index: 10000000; 
     display: block; 
     width:40% !important; 
    } 

    #menu-navigazione li { 
     display: block; 
    } 

    #menu-navigazione li a { 
     display: block; 
    } 

И это мой HTML структура

<a class="nav-toggle" href="#">Menu</a> 
<div class="menu-navigazione-container"> 
<ul id="menu-navigazione" class="menu" style="display: block;"> 
    <li><a href="#">Some content HERE</a></li> 
    <li><a href="#">Some other content HERE</a></li> 
</ul> 
</div> 

Где я делаю что-то не так?

Спасибо!

Answer 1

использовать этот CSS

.menu-navigazione-container { 
    position: relative; 
} 
#menu-navigazione { 
    position: absolute; 
    z-index: 10000000; 
    display: block; 
    width:40% !important; 
    top:42px; 
    left:0px; 
}