wordpress 웹 사이트 메뉴 내용 뒤에

Question

메신저 내 WordPress 웹 사이트에있는 메뉴의 문제가 여러 페이지에있는 내용 뒤에 나타납니다. iv가 온라인으로 솔루션을 찾고 있었고 iv가 z- 인덱스를 검토하고 적용하기 위해 다른 값을 사용했지만 여전히 운이 없다.

내가 모든

내 웹 사이트에 어떤 도움을 주셔서 감사합니다 것

은 다음과 같습니다 www.thehelpingworld.com

미리

에 감사합니다 (화면 폭이 800 픽셀 이하일 때 PS는 접을 수있는 메뉴가 나타납니다 점에 유의하시기 바랍니다) 메뉴

CODE :

.sf-menu ul:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    } 
.sf-menu ul { 
    display: table; 
    margin: 0 auto; 
} 
* html .sf-menu ul { 
    height: 1%; 
    } 
*:first-child+html .sf-menu ul { 
    min-height: 1px; 
    } 
.sf-menu ul { 
    display: block; 
    } 

.sf-menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 
.sf-menu li ul { 
    top: -999em; 
    position: absolute; 
    z-index: 99999; 
    } 
.sf-menu li:hover ul, 
.sf-menu li.sfHover ul { 
    top: 40px; 
    } 
.sf-menu li:hover li ul, 
.sf-menu li.sfHover li ul { 
    top: -999em; 
    } 
.sf-menu li li:hover ul, 
.sf-menu li li.sfHover ul { 
    top: 0; 
    left: 170px; 
    } 
.sf-menu li li:hover li ul, 
.sf-menu li li.sfHover li ul { 
    top: -999em; 
    } 
.sf-menu li li li:hover ul, 
.sf-menu li li li.sfHover ul { 
    top: 0; 
    left: 170px; 
    } 
.sf-menu li { 
    float: left; 
    position: relative; 
    visibility: inherit; 
    } 
.sf-menu li a { 
    float: left; 
    display: block; 
    font-weight: 400; 
    font-family: Oswald, Arial, Helvetica, sans-serif; 
    text-decoration: none; 
    text-transform: uppercase; 
    } 
.sf-menu li a:hover, 
.sf-menu li.sfHover > a, 
.sf-menu li.current_page_item > a, 
.sf-menu li.current-menu-item > a, 
.sf-menu li.current-menu-parent > a, 
.sf-menu li.current-page-parent > a, 
.sf-menu li.current-page-ancestor > a, 
.sf-menu li.current_page_ancestor > a { 
    } 
.sf-menu li:hover li a, 
.sf-menu li.sfHover li a { 
    width: 140px; 
    } 

#top-navigation { 
    background: #333; 
    } 
#top-navigation ul { 
    border-left: 1px dotted #565656; 
    } 
#top-navigation li ul { 
    } 
#top-navigation li:hover ul, 
#top-navigation li.sfHover ul { 
    top: 40px; 
    background: #333; 
    border-left: none; 
    border-top: 1px dotted #565656; 
    } 
#top-navigation li li:hover ul, 
#top-navigation li li.sfHover ul { 
    top: -1px; 
    border-left: 1px dotted #565656; 
    } 
#top-navigation li { 
    border-right: 1px dotted #565656; 
    } 
#top-navigation li li { 
    border-right: none; 
    border-bottom: 1px dotted #565656; 
    } 
#top-navigation li a { 
    padding: 0 15px; 
    color: #a6a6a6; 
    font-size: .9em; 
    line-height: 40px; 
    } 
#top-navigation li a:hover, 
#top-navigation li.sfHover > a, 
#top-navigation li.current_page_item > a, 
#top-navigation li.current-menu-item > a, 
#top-navigation li.current-menu-parent > a, 
#top-navigation li.current-page-parent > a, 
#top-navigation li.current-page-ancestor > a, 
#top-navigation li.current_page_ancestor > a { 
    color: #fff; 
    } 
#top-navigation li:hover li a, 
#top-navigation li.sfHover li a { 
    padding: 10px 15px; 
    font-size: .75em; 
    line-height: normal; 
    } 

#main-navigation { 
    border: solid #333; 
    border-width: 1px 0 3px; 
    } 
#main-navigation li a { 
    padding: 0 20px; 
    color: #333; 
    font-size: 1.2em; 
    line-height: 50px; 
    letter-spacing: 1px; 
    } 
#main-navigation .sf-menu > ul > li:after { 
    width: 6px; 
    float: left; 
    margin-top: 16px; 
    content: "/"; 
    display: block; 
    color: #e6e6e6; 
    font-size: 1.8em; 
    font-family: Arial, Helvetica, sans-serif; 
    } 
#main-navigation .sf-menu > ul > li:last-child:after { 
    display: none; 
    } 
#main-navigation li:hover ul, 
#main-navigation li.sfHover ul { 
    top: 50px; 
    background: #333; 
    } 
#main-navigation li li:hover ul, 
#main-navigation li li.sfHover ul { 
    top: -1px; 
    border-left: 1px dotted #565656; 
    } 
#main-navigation li li { 
    border-bottom: 1px dotted #565656; 
    } 
#main-navigation li li a { 
    color: #a6a6a6; 
    } 
#main-navigation li a:hover, 
#main-navigation li.sfHover > a, 
#main-navigation li.current_page_item > a, 
#main-navigation li.current-menu-item > a, 
#main-navigation li.current-menu-parent > a, 
#main-navigation li.current-page-parent > a, 
#main-navigation li.current-page-ancestor > a, 
#main-navigation li.current_page_ancestor > a { 
    color: #1fa0ae; 
    } 
#main-navigation li:hover li a, 
#main-navigation li.sfHover li a { 
    padding: 10px 20px; 
    font-size: .75em; 
    line-height: normal; 
    } 

Answer 1

#main-navigation > .sf-menu > ul 클래스에 양수 인 z-index을 추가하면 페이지 콘텐츠 앞에 드롭 다운 메뉴가 나타납니다.

#main-navigation > .sf-menu > ul { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    max-height: 0; 
    max-width: 16em; 
    overflow: hidden; 
    background: #333; 
} 

는

#main-navigation > .sf-menu > ul { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    max-height: 0; 
    max-width: 16em; 
    overflow: hidden; 
    background: #333; 
    z-index: 999; 
}