[Resolved] Underline on sub menu items?

[Rickard]

Hello!

I have a underline when I hover over the menu items using the code below, but how can I make it underline the sub menu items also?

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 12px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 80%;
    }
}

[Leo]

Hi there,

We find that hover effect doesn’t really look good for submenu items but try this:

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 12px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor a::after,
    .main-navigation .menu > .menu-item a:hover::after {
        width: 80%;
    }
}

[Rickard]

No you’re right, it doesn’t look good on sub menu.

Will go for changing color on hover instead.

Thank you though!

[Leo]

No problem 🙂

[Author]

Posts