모바일 메뉴가 올바르게 표시되지 않습니다.

Question

"모바일 탐색 메뉴"를 만들려고합니다.

다음은이 CSS Dropdown Menu입니다 (CSS 드롭 다운 메뉴 단락 및 리소스 참조).

"메뉴"버튼을 클릭하여 메뉴를 열면 하위 메뉴 음성이 "메뉴"버튼보다 우선 적용되므로 메뉴가 열릴 때 메뉴를 닫을 수 없습니다.

여기 내 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; 
}