Menu third Level color, size and position

Hi Sascha,

Try this CSS for the third level:

.main-navigation .main-nav > ul ul ul li a {
    background-color: red;
    color: yellow;
    font-size: 20px;
}

.main-navigation .main-nav > ul ul ul li:not([class*="current-menu-"]):hover a {
    background-color: blue;
    color: white;
}

And how can I make the second level and third level move slightly to the right when opening it? The third level more right as the second level.

Are you talking about the menu on desktop or mobile?

thanks for your answer!

I meant the mobile version. The deskop version are perfect.

if you don't know what i mean, let me know :)

Hi there,

try adding this CSS:

@media(max-width: 768px) {
    /* Indent levels 2 and 3 */
    .main-navigation .main-nav ul ul {
        padding-left: 10px;
    }
    /* style level 3 links */
    .main-navigation .main-nav > ul ul ul li a {
        background-color: red;
        color: yellow;
        font-size: 20px;
    }
}

Thanks! It works!

glad to hear that