Question

我正在构建一个Wordpress模板并遇到这个问题我无法找到解决方案。

我的模板中有一个下拉子菜单，但我不希望我的子子菜单是下拉菜单，只是显示主子菜单项下的子子项

html结构：

<ul id="menu">
    <li id="menu-item">
        <ul id="sub-menu">
            <li id="sub-menu-item">
                <ul id="sub-sub-menu">
                    <li id="sub-sub-menu-item">
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

＃子菜单显示为下拉菜单，我希望＃sub-sub-menu不是下拉列表。 #sub-sub-menu菜单应该只是一个普通列表。

这是下拉列表中的css：

#navdiv ul ul {
    display: none; 
    position: absolute;
    top: 20px;
    color: #b8b8b8;
    left: 0!important;
    background-color: #FFF;
    -moz-box-shadow: 0 0 5px 1px #000;
    -webkit-box-shadow: 0 0 5px 1px#000;
    box-shadow: 0 0 5px 1px #000;
    padding: 15px 0px 15px 0;
    z-index: -20;
}

.sub-menu li a {
    color: #b8b8b8!important;
}

.sub-menu li a:hover {
    color: #e74d25!important;
}

#navdiv ul ul li {
    float: none!important;
    width: auto;
    padding: 0!important;
    border-left: none;
    margin-top: 0;
    text-align: left;
    height: 15px!important;
    min-width: 200px;
}

#navdiv ul ul li:after {
    content: ""!important;
}
#navdiv ul ul li a {
    padding: 5px 10px;
}
#navdiv ul li:hover > .sub-menu {
    display: block;
}

我应该怎么做才能使ul ul ul不会成为一个下拉列表？

Answer 1

您可以将上面代码中的第一个选择器从 #navdiv ul ul { ... } 更改为ul 内的 ul 到 ul 以确保只有二级 #navdiv 受到影响。

然后为第三级 #navdiv > ul > li >ul { ... } 创建一个新规则，例如 ul，该规则不是隐藏的，而是显示您决定的任何参数。

与 ul 元素类似 - 只需在标签之间使用 #navdiv > ul > li > ul > li> ul { ... } 字符来仅寻址直接子级。

Wordpress子子菜单项没有下拉列表

1 个答案: