HTML classes in menu with Wordpress

In this case you need to organize the hierarchy of the menu. When you use a framework, for example, CSS is already formatted, but since you are doing a theme, you have to sew it in your code.

A simplified way to do this would be to register the following function for your main menu within the functions.php of your theme.

Put something like:

add_theme_support( 'menus' );

function register_theme_menus () {
    register_nav_menus( [
        'primary-menu' => _( 'Menu principal' )
    ] );
}

add_action( 'init', 'register_theme_menus' );

In your header.php , where you are currently calling the main menu, add the following code to call up the menu that you previously registered (you can also add the same in specific parts as you like) / p>

<nav id="menu">
    <?php wp_nav_menu(array('theme_location'=>'primary-menu')); ?>
</nav>

CSS example, however, it is important that you customize according to your interest:

/* Primeiro nível - Hierarquia */
nav#menu ul li {float:left; position:relative; text-transform:uppercase; list-style:none}
nav#menu ul li a {display:block; background:#152635; color:#fff; padding:5px 15px; font-size:14px;}

/* Primeiro nível - Hierarquia */
nav#menu ul li ul {display:none;}
nav#menu ul li ul li a {width:160px;}
nav#menu ul li:hover ul {display:block; position:absolute; top:26px;}

/* Terceiro nível - Hierarquia */
nav#menu ul li ul li ul li {list-style:inside square}
nav#menu ul li ul li ul li a {font-size:11px; color:#ddd}

I hope I have helped. ;)