Dropdown menu 3 levels

по мотивам
3 levels menu dropdown with css – https://codepen.io/sheldonled/post/menu-dropdown-css-3levels

Меню – 3 уровня НTML + CSS

Верхний уровень меню расположен в строчку
2й и 3й уровень расположены в столбцы
Меню 3го уровня слева от родительского столбца, кроме последней колонки – там справа.

Меню – 3 уровня – только HTML

Чистый html без css выглядит так

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Tutoriais</a>
      <ul>
        <li><a href="#">Php</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">SQL</a>
          <ul>
            <li><a href="#">PostgreSQL</a></li>
            <li><a href="#">MySql</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Redes Sociais</a>
      <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a>
          <ul>
            <li><a href="#">Twitter</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Как сделано

Все стили пишем относительно класса primary_menu
<nav class=”primary_menu“>….</nav>

.primary_menu ul {
  font-size: 18px;
  line-height: 18px;
  /* position: absolute; */
  /* position: relative; */
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #16a085;
}

.primary_menu li {
  position: relative;
  /* display: inline-block; */
}

.primary_menu ul – меню 1го уровня – расположено в строчку
можно реализовать либо
.primary_menu ul – display: flex;
либо
.primary_menu li – display: inline-block;

.primary_menu li – относится ко всем уровням, введено позиционирование (position: relative;) для дочерних меню, если они есть

/* Level 2, 3 */
/* если есть дочернее меню - раскрывается блок в столбик */
.primary_menu li:hover > ul {
  display: flex;
  flex-flow: column nowrap;
  /* display: block; */
  width: max-content;
  /* width: 100%; */
  text-align: left;
}

/* Level 2 */
.primary_menu ul ul {
  position: absolute;
  display: none;
}

.primary_menu ul ul меню 2го уровня не показывается (display: none;), позиционировано абсолютно относительно родительского li

.primary_menu li:hover > ul для меню 2 и 3го уровня – при наведении курсора на родительский li раскрывается дочернее меню если оно есть
можно реализовать либо
display: block;
либо
display: flex;
flex-flow: column nowrap;

меню 2го уровня будет расположено под родительским li – position: absolute;

ширина дочернего меню
можно выставить фиксированную ширину – width: 200px;
либо width: 100%; – будет равна ширине родительского li
либо width: max-content; – будет равна ширине наибольшего элемента меню – активно сейчас!
width: 100%; – может не хватать ширины для элемента, чтобы не было переноса на другую строку – можно обрезать длину элемента – https://vahro.ru/other/when-text-is-too-long/

/* Level 3 */
/* Меню 3го уровня в любой колонке откроется слева от столбца 2го уровня */
.primary_menu ul ul ul {
  position: absolute;
  top: 0;
  left: 100%;
}

/* Меню 3го уровня в последней колонке откроется справа от столбца 2го уровня */
.primary_menu ul li:last-child ul ul {
  left: auto;
  right: 100%;
}

.primary_menu ul ul ul – меню 3го уровня будет располагаться
на уровне родительского li по горизонтали – top: 0;
в столбик слева – left: 100%;

.primary_menu ul li:last-child ul ul – если у самого последнего элемента li верхнего уровня есть дочернее меню и у какого-то элемента дочернего меню 2го уровня есть меню 3го уровня – оно раскроется справа от меню 2го уровня
left: auto;
right: 100%;

.primary_menu a {
  padding: 10px 10px;
  display: block;
  color: white;
  text-decoration: none;
}

.primary_menu li:hover {
  background-color: black;
}

.primary_menu a:hover {
  color: yellow;
}

.primary_menu a
.primary_menu li:hover
.primary_menu a:hover – добавим немножко оформления

Добавляем меню в WordPress

functions.php
register_nav_menus(
	array(
		'primary' => 'Главное меню'
	)
);

header.php
wp_nav_menu( array(
	'menu' => 'menu-primary',
	'theme_location' => 'primary',
	'depth' => 0,
	'container' => 'nav',
	'container_class' => 'primary_menu'
));

Дополнительно почитать
wp_nav_menu() | Function | WordPress Developer Resources – https://developer.wordpress.org/reference/functions/wp_nav_menu/
wp_nav_menu() – https://wp-kama.ru/function/wp_nav_menu
wp_nav_menu() – вывод меню – https://misha.agency/wordpress/wp_nav_menu.html