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

Posted 2023-03-06

【中文标题】WordPress Sub Sub 菜单项没有下拉菜单

【英文标题】：WordPress Sub Sub menu items no dropdown

【发布时间】：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

【参考方案1】：

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

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

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