Выпадающие элементы в меню

Прошу помощи, не знаю, как это сделать. Листал по темам и форумам, нужного ответа так и не смог найти!

Есть готовая вёрстка сайта, нужно сделать её темой для WP. В ней 4 пункта меню: "Главная", "Новости", "Курсы", "Контакты". Пункт "Курсы" при клике мышью раскрывает 3 курса: "Курс 1", "Курс 2", "Курс 3". Пробовал задавать дочерние элементы меню в админ панели через Внешний вид -> Меню, но верстка тогда ломается и отображается некорректно. Дело в том, что вёрстка написана на фреймворке Materialize, и там меню пишется следующим образом:

<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a></li>
	<li><a class='dropdown-button' href='#' data-activates='dropdownThis'>Курсы</a></li> <!-- вот элемент с раскрывающимся списком -->
	<ul id='dropdownThis' class='dropdown-content '>
	   <li><a href="#!">Курс 1</a></li>
	   <li><a href="#!">Курс 2</a></li>
	   <li><a href="#!">Курс 3</a></li>
	</ul>
	<li><a href="#">Контакты</a></li>
</ul>

Т.е. нужно сделать так, чтобы, если элемент меню имеет дочерние элементы, к нему добавлялись определённые атрибуты, а его дочерние элементы оборачивались в другой тег ul c другими атрибутами.

Пожалуйста, скажите, как это сделать?