WordPress Sub Sub menu items no dropdown

Question

I'm building a WordPress template and running into this problem I can't find the solution to.

I have a dropdown sub menu in my template, but I don't want my sub sub menu to be a dropdown but just display the sub sub item under the main sub menu item

The html structure:

<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>

The #sub-menu shows as a dropdown which is fine, I want the #sub-sub-menu to not be a dropdown. The #sub-sub-menu should be just a normal list.

This is the css which makes the dropdown:

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

What should I do to make sure the ul ul ul doesn't become a dropdown?

You'll need to tweek the CSS and jQuery for the behavior of #sub-sub-menu — Alex

Johannes Johannes · Accepted Answer · 2021-01-19T23:39:52

You can change the very first selector in your code above from #navdiv ul ul { ... } (which also affects the third-level ul since it adresses any ul within a ul within #navdiv) to #navdiv > ul > li >ul { ... } to make sure only the second-level ul is affected.

Then create a new rule for the third level ul like #navdiv > ul > li > ul > li> ul { ... } which is not hidden, but displayed with whatever parameters you decide.

Similar for the lielements - just use the > character between the tags to adress only direct children.

WordPress Sub Sub menu items no dropdown

1 Answers