Question

我的菜单显示正常，我遇到了一些问题。出于某种原因，我的第3级菜单项隐藏在其他菜单项后面。我已经浏览了我正在使用的模板，事情似乎没有问题，否则菜单选项甚至不会显示。因此，我认为我的CSS有问题，但我看不出那会是什么。有没有人对这里发生了什么有任何想法？您可以在http://www.bpwsaskatoon.com查看示例，然后将鼠标悬停在顶部的“成员资格”选项中。

Answer 1

问题在于css。首先，您应该在导航样式上使用类或id：s。示例ul li现在针对每个ul li。通过使用#nav ul li将仅定位#nav中的所有ul li。在html中，.main_nav_menu中的ul应为div。你现在直接在ul。

我建议你为下拉菜单尝试一些jquery插件。示例Superfish非常好，它会在下拉菜单中考虑许多因素，例如触摸事件。

这是一个快速的CSS，应显示第3级菜单项。

    /*Navigation styles*/

    #nav{
        display:table;
        margin:0 auto 0 auto;
        position:relative;
        padding:5px;
    }

    #mnwrpr{
        height:48px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.5);
        clear: both;
        display: block;
        position: relative;
        width: 100%;
        z-index:1;
    }

    #nav ul {
        font-family:'Lato', sans-serif;
        font-size: 15px;
        margin: 0;
        padding: 0;
    }
    #nav ul li {
        display: block;
        position: relative;
        float: left;
    }
    #nav li ul {
        display: none;
    }
    #nav ul li a {
        display: block;
        text-decoration: none;
        color: #8b8b8b;
        padding: 5px 15px 5px 15px;
        margin-left: 1px;
        white-space: nowrap;
    }

    #nav li:hover ul {
        display: block;
        position: absolute;
    }
    #nav li:hover li {
        float: none;
        font-size: 14px;
    }
    #nav li:hover li { background: #ececec; }
    #nav li:hover li a:hover {
        background: #bcbcbc;
    }

    #nav ul li ul li ul {
        top: 0;
        left: 100%;
        z-index: 99;
        min-width: 12em;
        position: absolute;
        margin: 0;
        padding: 0;
        list-style: none;
        display: none!important;
    }

    #nav ul li ul li:hover ul {
        display: block!important;
    }

    #nav ul li ul li ul li {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
    }

菜单项在Wordpress上显示在其他人后面

1 个答案: