sana,
для проверки кода можно использовать консоль - есть в каждом браузере
https://learn.javascript.ru/devtools
вариант ниже ... тоже самое что у вас, но чуть покороче
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Menu</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
<style>
.submenu { margin: 0; list-style: none; padding: 0; }
.submenu.hidden {display: none; }
</style>
<script>
function initExpand() {
function fn(ul) {
var parent = ul.parentNode;
var h4 = parent.querySelector("h4");
h4.onclick = function() {
ul.classList.toggle("hidden")
};
ul.classList.add("hidden")
}
Array.prototype.forEach.call(document.querySelectorAll(".mainmenu .submenu"), fn)
}
window.onload = initExpand;
</script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<ul class="mainmenu">
<li><h4 class="expandera">Colors</h4>
<ul class="submenu">
<li><a href="#">Black</a></li>
<li><a href="#">Red</a></li>
<li><a href="#">Blue</a></li>
</ul>
</li>
<li><h4 class="expandera">Animals</h4>
<ul class="submenu">
<li><a href="#">Bear</a></li>
<li><a href="#">Fox</a></li>
<li><a href="#">Dog</a></li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
</body>
</html>