WordPress的網站菜單背後的內容

Question

即時通訊問題的WordPress網站上的菜單出現在多個頁面上的內容後面。 iv一直在尋找一個解決方案，iv看着z-索引，並使用不同的值來應用，但仍然沒有運氣。

我將不勝感激所有

我的網站有任何的幫助是：www.thehelpingworld.com

（PS請注意出現的可摺疊式菜單時，屏幕的寬度小於800像素）

預先感謝您

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; 
}