JavaScript（not jQuery）でドロップダウンメニュー作りたい

Question

###前提・実現したいこと
JavaScriptでjQueryを使用せずに、ドロップダウンメニュー（マウスをかざすとメニューが下方向にピロっと出てくる）を作りたいです。
ヘッダー部分のグローバルナビ３つがそのメニューになっている状態です。

・既存のHTMLがあり、scriptタグの中にJavaScriptを書いて達成したい。
・当初はメニューが開いた形になっており、ページをロードするとJavaScriptが動作してメニューが閉じた状態になる。
・マウスをナビ部分にかざすとメニューがドロップダウンする。

###発生している問題・エラーメッセージ
いちおうメニューを閉じた状態にまでもっていくことが出来ましたが、その先がどうしてもわからずご教示願いたいのです。よろしくお願いいたします。

###該当のソースコード

<header>
<div class="inner clearfix">
<h1 id="logo"><a href="#"><img src="image/logo.jpg" alt=""/></a></h1>
<nav>
<ul id="navi" class="clearfix">
<li><a href="#">会社概要</a>
<div class="sub">
<ul>
<li><a href="#">記事1</a></li>
<li><a href="#">記事2</a></li>
<li><a href="#">記事3</a></li>
</ul>
</div>
</li>
<li><a href="#">製品</a>
<div class="sub">
<ul>
<li><a href="#">記事1</a></li>
<li><a href="#">記事2</a></li>
<li><a href="#">記事3</a></li>
</ul>
</div>
</li>
<li><a href="#">新着情報</a>
<div class="sub">
<ul>
<li><a href="#">記事1</a></li>
<li><a href="#">記事2</a></li>
<li><a href="#">記事3</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</div><!-- widthfix -->
</header>

<script>
var items = document.querySelectorAll('a'); //複数のa要素の取得
	for(var i=0; i<items.length; i++){
     	window.addEventListener("load",function(){ //画面が呼び出されたときjsを動作
		var nodeList = document.querySelectorAll('div.sub');
			for(var i=0; i<nodeList.length; i++){
				nodeList[i].style.display = 'none'; //ここでメニューが閉じた状態
				//この先をどうして良いのかわからず。。
			}
		},false);
	}
</script>

Answer 1

jQueryを嫌うくらいならメニューはcssで十分では？

#navi li ul{
  visibility: hidden;
  height: 0px;
  opacity:0;
}
#navi li:hover ul {
  visibility: visible;
  height: inherit;
  opacity:1;
  transition: 0.5s;
}

Comments

[tuepon]

ご回答ありがとうございます。

この方法がスマートかもしれませんね。
実装してみます。

Answer 2

みなさんjQueryを嫌いますね･･･。便利で良いやつなんですが、もう時代ではなくなったんでしょうか。
直接の回答ではありませんが、とりあえず気になる箇所にコメントを入れています。

// ↓ querySelectorAll('a') では意図しないa要素を取得してしまうので、メニュー以下のa要素に絞ったほうが良いです
var items = document.querySelectorAll('a');
for(var i=0; i<items.length; i++){
    // ↓ for の中に入れているので、loadイベントがa要素の数だけ登録されます。バグ的な挙動の原因にもなるので書き方を変えたほうが良いです。
    window.addEventListener("load",function(){
    // 変わった基準でインデントされてますね･･･。
        // ↓ メニュー以下に絞ったほうが
        var nodeList = document.querySelectorAll('div.sub');
        for(var i=0; i<nodeList.length; i++){
            // #navi に close クラスとか作って、CSSで挙動を制御するほうがお勧めです。
            nodeList[i].style.display = 'none';
        }
    },false);
}

CSSで状態を組んでしまい、クラスの付け外しをJavaScriptで行うのがお勧めです。

Comments

[tuepon]

ご回答ありがとうございます。

jQueryは嫌ってはおらず、チャレンジとして今回取り組んでおります。

CSSである程度作り込む方法、ご指摘いただいた点をまず直して実装してみたいと思います。

[tuepon]

放置してしまっていました。
おかげさまで問題個所を直して動くようになりました。

要素をうまく取得するのにはDeveloper ToolのConsoleで直打ちするのが分かりやすいですね。
自分の悪い点をご指摘いただいたということで、kei344さんの回答をベストアンサーとさせていただきます。
ありがとうございました。