How to add and show the underline actively on main menu and sub-menu

Hi there,

try this CSS:

@media(min-width: 769px) {
    .main-navigation ul li a {
        border-bottom: 1px solid transparent;
    }
    .main-navigation ul li.current-menu-item a,
    .main-navigation ul li:hover > a {
        border-bottom: 1px solid #000;
    }
    /* optional - add space below menu items */
    .main-navigation {
        padding-bottom: 10px;
    }
}

hi david
thanks for your help.

added and it is perfect.

it is the only method to solve my concern by adding extra CSS?

paul

Yes, it can only be done with CSS :)
If you're concerned about that code creating performance issues, then don't - small amounts of CSS are not a problem, its only when you start adding hundreds ( thousands ) of lines of CSS that can be a problem.