js menu old style

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript</title>
	<style>
		#nav { width:100%; height:50px; background:#00f; }
		#nav #main a { width:auto; height:50px; color:#fff; line-height:50px; font-size:20px; font-weight:bold; text-decoration:none; display:inline-block;
		padding:0 10px;}
	#nav #main a:hover { color:#f00; background:#ff0; }
	#nav #sub div { width:100%; height:30px; background:#ccc; line-height:30px; display:none; }
	</style>
</head>
<body>
	<div id="nav">
		<div id="main">
			<a href="#" onmouseover="m(1);">회사소개</a>
			<a href="#" onmouseover="m(2);">제품소개</a>
			<a href="#" onmouseover="m(3);">게시판</a>
		</div>
		<div id="sub">
			<div id="sub1">인사말씀 | 연혁 | 찾아오시는 길</div>
			<div id="sub2">주방용품 | 벽지 | 페인트</div>
			<div id="sub3">공지사항 | 자유게시판 | 갤러리</div>
		</div>
	</div>
	<script>
		function m(n) {
			for(var i=1;i<=3;i++){
				var subid = "sub" + i;
				var subdiv = document.getElementById(subid);
				if(i == n) {
					subdiv.style.display = "block";
				} else {
					subdiv.style.display = "none";
				}
			}
		}
	</script>
</body>
</html>