홈페이지 드롭다운 네비게이션

 

HTML의 드롭다운 네비게이션을 만들어 보았습니다.

 

MENU1에 커서를 올리면 위와 같이 나타나게됩니다.

---

(소스코드)

<header>
	<nav>
		<ul class="menu">
		
		<li><a href="#">MENU1</a>
		<ul class="submenu">
		<li><a href="#">SUB1</a></li>
		<li><a href="#">SUB1</a></li>
		<li><a href="#">SUB1</a></li>
		<li><a href="#">SUB1</a></li>
		</ul>
		</li>
		
		<li><a href="#">MENU2</a>
		<ul class="submenu">
		<li><a href="#">SUB2</a></li>
		<li><a href="#">SUB2</a></li>
		<li><a href="#">SUB2</a></li>
		<li><a href="#">SUB2</a></li>
		</ul>
		</li>
		
		<li><a href="#">MENU3</a>
		<ul class="submenu">
		<li><a href="#">SUB3</a></li>
		<li><a href="#">SUB3</a></li>
		<li><a href="#">SUB3</a></li>
		<li><a href="#">SUB3</a></li>
		</ul>
		</li>
		
		</ul>


	</nav>
</hader>



<style>
*{padding:0; margin:0;}
a {text-decoration:none;}
.menu {width:999px;margin:0px auto;}
.menu > li{float:left; list-style-type:none; width:33%;
background-color:yellow;text-align:center; height:50px;line-height:50px;font-weight:bold;font-size:25px;}
.submenu{height:0; overflow:hidden; list-style-type:none;}
.submenu > li {background-color:lightgray; padding:15px;height:20px;line-height:20px;font-weight:normal;font-size:20px;}
.menu:hover .submenu{height:250px}
</style>