Не могу найти ошибку, почему не выпадает меню?

<nav>
    <div class="openMenu" id="openMenu">  Open  </div>

<ul id="menu">
    <li>
        <a href="#">Hello</a>
    </li>
    <li>
    <a href="#">Hello</a>
    </li>
    <li>
    <a href="#">Hello</a>
    </li>
    <li>
    <a href="#">Hello</a>
    </li>
    <li>
    <a href="#">Hello</a>
    </li>
    <li>
    <a href="#">Hello</a>
    </li>



</ul>







</nav>

nav{


    position: relative;
    text-align: center;
}
nav ul{
    display:inline-block;
   background-color: black;
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li{
    display: inline-block;
}
nav ul li a{
    display: block;
    padding: 10px 15px;
    color: black;
    text-decoration: none;
}
.openMenu{
    display: none;
    color: red;
    padding: 10px 15px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .openMenu{display: block}
    nav ul{display: none;position: absolute;top: 100%;left:0;
    width: 100%}
    nav ul:active{display: block }
    nav ul li{display: block }
}






<code lang="javascript">
window.onload = function () {
    var menuStyle = getComputedStyle(menu);
    openMenu.onclick = function () {
        if (menuStyle.display == 'none'){
            menu.classList.add("active")
            this.innerHTML = "Open";
        }else {
            menu.innerHTML.remove("active")
            this.innerHTML = "Close";
        }
    }
}
</code>