プログラミング初心者が、JavaScriptでアコーディオンメニュー作ってみた。

初めてアコーディオンメニュー、作ってみました。
ライブラリは使っていません。
素のJavaScriptのみです。

DEMOページ

以下がソースコードになります。

index.html

<div id="wrapper">
    <div id="nav">
        <ul> 
            <li class="color-blue">
                <div class="main">メンズファッション</div>
                <ul class="subs"> 
                    <li><a href="test.html">Tシャツ</a></li> 
                    <li><a href="test.html">ポロシャツ</a></li> 
                    <li><a href="test.html">ワイシャツ</a></li> 
                    <li><a href="test.html">ベスト</a></li>
                </ul> 
            </li> 
            <li class="color-red">
                <div class="main">メンズスーツ</div>
                <ul class="subs"> 
                    <li><a href="test.html">シングルスーツ</a></li> 
                    <li><a href="test.html">ダブルスーツ</a></li> 
                    <li><a href="test.html">オーダースーツ</a></li> 
                    <li><a href="test.html">その他のスーツ</a></li> 
                </ul> 
            </li>
            <li class="color-yellow">
                <div class="main">アウトドアウェア</div>
                <ul class="subs"> 
                    <li><a href="test.html">トップス</a></li> 
                    <li><a href="test.html">パンツ</a></li> 
                    <li><a href="test.html">インナー</a></li> 
                </ul> 
            </li>
            <li class="color-green">
                <div class="main">雑貨・小物</div>
                <ul class="subs"> 
                    <li><a href="test.html">メンズベルト</a></li> 
                    <li><a href="test.html">ネクタイ</a></li> 
                    <li><a href="test.html">ハンカチ</a></li> 
                </ul> 
            </li> 
        </ul>
    </div>
</div>
<script src="js/script.js"></script>

style.css

@charset "utf-8";

/* ------- base ------- */
body{
	background:#FFF;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	color: #FFF;
}

body, ul, li, div {
	margin: 0;
	padding: 0;
}

img {
	border:0;
}

a {
	text-decoration:none;
}

/* ------- wrapper ------- */
#wrapper {
	width: 740px;
	margin: 30px auto;
}

/* ------- nav ------- */
#nav {
	width:190px;
}

#nav li {
	list-style: none;
}

div.main {
	height: 60px;
	line-height: 60px;
	text-indent:25px;
	background-color:#3FC6F3;
	border-right:10px solid #0D9BE5;
	cursor:pointer;
}

ul.subs li a {
	display:block;
	height: 40px;
	line-height: 40px;
	text-indent:25px;
	background-color:#F5F5F5;
	border-right:10px solid #0D9BE5;
	font-size:12px;
	color: #164158;
}

/* ------- 色の指定 ------- */
/* メインメニュー */
li.color-blue div.main {
	background-color:#8ac6d1;
	border-right:10px solid #204969;
}

li.color-red div.main {
	background-color:#FF625F;
	border-right:10px solid #e41749;
}

li.color-yellow div.main {
	background-color:#FEBD01;
	border-right:10px solid #FF8D00;
}

li.color-green div.main {
	background-color:#248888;
	border-right:10px solid #1f640a;
}

/* サブメニュー */
li.color-blue ul.subs li a {
	border-right:10px solid #204969;
	color: #0D9BE5;
}

li.color-red ul.subs li a {
	border-right:10px solid #e41749;
	color: #FD2621;
}

li.color-yellow ul.subs li a {
	border-right:10px solid #FF8D00;
	color: #FF8D00;
}

li.color-green ul.subs li a {
	border-right:10px solid #1f640a;
	color: #15B59B;
}


li.color-blue ul.subs li a:hover {
	background-color: #8ac6d1;
	color: #FFF;
}

li.color-red ul.subs li a:hover {
	background-color: #FF625F;
	color: #FFF;
}

li.color-yellow ul.subs li a:hover {
	background-color: #FEBD01;
	color: #FFF;
}

li.color-green ul.subs li a:hover {
	background-color: #248888;
	color: #FFF;
}

script.js

'use strict';

//アコーディオンメニュー
function accordion() {
    const nav = document.querySelector('#nav ul').children;
    const ul = document.querySelector('ul');
    const main = document.querySelectorAll('.main');
    const subs = document.querySelectorAll('.subs');

    //開閉部、閉じる
    for (const item of nav) {
        const subsIndex = item.children.length - 1;
        const subsItem = item.children;
        subsItem.item(subsIndex).setAttribute('style','display:none');
    }

    //アコーディオンを開く
    for(let i = 0; i < main.length; i++) {
        main.item(i).addEventListener('mouseover', function(){
            subs.item(i).removeAttribute('style');
        });

        //アコーディオンを閉じる
        ul.addEventListener('mouseleave', function(){
            subs.item(i).setAttribute('style','display:none');
        });
    }
}

accordion();