Адаптивное многоуровневое меню на чистом javascript

<style>
    body {margin: 0; padding: 0}
    nav {background-color: #00a4d5; position: relative; text-align: center}
    nav ul {display: inline-block; background-color: #00a4d5; margin: 0; padding: 0; list-style: none; }
    nav ul li {display: inline-block}
    nav ul li a {display: block; padding: 10px 15px; color: #fff; text-decoration: none;}
    .openMenu {display: none; color: #fff; padding: 10px 15px; cursor: pointer}
    .menu-item {position: relative}
    .menu-item>span {display: none;}
    .sub-menu {height: 0; overflow: hidden; opacity: 0; transition: all 0.5s ease-in; position: absolute; width: 100%; top: 100%; left: 0;
    text-align: left}
    @media (max-width: 767px) {
        .openMenu {display: block}
        nav ul#menu {display: none; position: absolute; top: 100%; left: 0; width: 100%; transition: all 0.5s ease-in;}
        nav ul#menu.active {display: block}
        nav ul li {display: block}
        .menu-item>span {display: block; position: absolute; right: 10px; top: 10px; color: #fff;}
        .sub-menu {position: static}
    }
</style>

<nav>
    <div class="openMenu" id="openMenu">Открыть меню</div>
    <ul id="menu">
        <li class="menu-item">
            <a href="#">Первый пункт</a>
            <ul class="sub-menu">
                <li>
                    <a href="#">Подпункт меню 1</a>
                </li>
                <li>
                    <a href="#">Подпункт меню 2</a>
                </li>
                <li>
                    <a href="#">Подпункт меню 3</a>
                </li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#">Второй пункт</a>
        </li>
        <li class="menu-item">
            <a href="#">Третий пункт</a>
        </li>
        <li class="menu-item">
            <a href="#">Четвертый пункт</a>
            <ul class="sub-menu">
                <li>
                    <a href="#">Подпункт меню 1</a>
                </li>
                <li>
                    <a href="#">Подпункт меню 2</a>
                </li>
                <li>
                    <a href="#">Подпункт меню 3</a>
                </li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="#">Пятый пункт</a>
        </li>
    </ul>
</nav>

BX.ajax.onload_163337 = function () {
    var subMenu,
        subMenuStyle,
        menuStyle,
        opener,
        el = document.getElementsByClassName('menu-item'),
        winWidth = document.documentElement.clientWidth;
        for(var i=0; i<el.length; i++){
            if(el[i].children.length > 1) {
                opener = document.createElement('span');
                opener.innerHTML = ">>";
                el[i].insertBefore(opener, el[i].children[1]);
                if(winWidth>=768){
                    el[i].addEventListener("mouseenter",showSub,false);
                    el[i].addEventListener("mouseleave",hideSub,false);
                } else {
                    el[i].children[1].addEventListener("click",subOpen,false);
                }
            }
        }
        function showSub() {
            subMenu = this.children[2];
            subMenu.style.height = "auto";
            subMenu.style.overflow = "visible";
            subMenu.style.opacity = "1";
        }
        function hideSub() {
            subMenu = this.children[2];
            subMenu.style.height = "0px";
            subMenu.style.overflow = "hidden";
            subMenu.style.opacity = "0";
        }
        function subOpen() {
            subMenu = this.nextElementSibling;
            subMenuStyle = getComputedStyle(subMenu);
            if(subMenuStyle.height == "0px"){
                subMenu.style.height = "auto";
                subMenu.style.overflow = "visible";
                subMenu.style.opacity = "1";
            } else {
                subMenu.style.height = "0px";
                subMenu.style.overflow = "hidden";
                subMenu.style.opacity = "0";
            }
        }
        menuStyle = getComputedStyle(menu);
        openMenu.onclick = function () {
            if(menuStyle.display == "none"){
                menu.classList.add("active");
                this.innerHTML = "Закрыть меню";
            } else {
                menu.classList.remove("active");
                this.innerHTML = "Открыть меню";
            }
        }
    }