WordPress Sub Sub 菜单项没有下拉菜单答案

【问题标题】：WordPress Sub Sub menu items no dropdownWordPress Sub Sub 菜单项没有下拉菜单
【发布时间】：2014-03-30 17:53:58
【问题描述】：

我正在构建一个 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-menu 显示为下拉菜单，这很好，我希望 #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 不会变成下拉菜单？

【问题讨论】：

您需要调整 CSS 和 jQuery 以实现 #sub-sub-menu 的行为
我现在包含了 CSS

标签： html css wordpress css-selectors

【解决方案1】：

您可以从#navdiv ul ul { ... } 更改上面代码中的第一个选择器（这也会影响第三级ul，因为它在@ 中的ul 中寻址任何 ul 987654325@) 到#navdiv > ul > li >ul { ... } 以确保只有二级ul 受到影响。

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

与 lielements 类似 - 只需在标签之间使用 > 字符来仅处理直接子级。

【讨论】：