WordPress的网站菜单背后的内容

即时通讯问题的WordPress网站上的菜单出现在多个页面上的内容后面。 iv一直在寻找一个解决方案，iv看着z-索引，并使用不同的值来应用，但仍然没有运气。WordPress的网站菜单背后的内容

我将不胜感激所有

我的网站有任何的帮助是：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; 
    }

来源

2014-05-11 Avtar Brar

请在你的代码有问题。通过提供像你一样的链接，你冒着很多聪明的人忽略你的问题，因为他们不想调试你的整个网站。 –

感谢您的建议RUJordan，iv相应地修补了帖子 –

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

来源

2014-05-11 20:57:41 Howli

谢谢，但我只是试过了，没有运气，仍然是同一问题 –

这个答案是正确的。＃main-navigation> .sf-menu> ul位于theme/fashionistas/style.css的第502行。 – shubhra

WordPress的网站菜单背后的内容

回答

相关问题