HTML5/CSS3를 이용한 메뉴

HTML/CSS3만 활용하여 만든 메뉴

style

/*Reset*/ html,body{margin:0; padding:0; width:100%;} li{list-style: none;} a{text-decoration:none;} a:hover{text-decoration:underline;} /*메뉴 배경*/ #menu_wrap{width:100%;height:50px; background-color:#262626;} #menu_wrap .contents{line-height:50px;} /*메뉴*/ .menu{width:147px; float:left; text-align:center;} .menu:hover{background:#454242;} .menu>a{padding:15px 27px;} .menu a{color:#fff; font-weight:bold;} /*서브메뉴*/ .sub_m{padding:0 25px;  border:1px solid #262626; border-top:-1px; background:#fff; display:none;}/*display:none; 서브메뉴 가리기 */ .sub_m a{color:#000;} /*서브메뉴 보이게*/ .menu:hover .sub_m{display:block;}

 

body

<div id="menu_wrap"> <ul class="contents"> <li class="menu"> <a href="#">메뉴1</a> <ul class="sub_m"> <li><a href="#">서브메뉴 1-1</a></li> <li><a href="#">서브메뉴 1-2</a></li> <li><a href="#">서브메뉴 1-3</a></li> <li><a href="#">서브메뉴 1-4</a></li> </ul> </li> <li class="menu"> <a href="#">메뉴2</a> <ul class="sub_m"> <li><a href="#">서브메뉴 2-1</a></li> <li><a href="#">서브메뉴 2-2</a></li> <li><a href="#">서브메뉴 2-3</a></li> <li><a href="#">서브메뉴 2-4</a></li> </ul> </li> <li class="menu"> <a href="#">메뉴3</a> <ul class="sub_m"> <li><a href="#">서브메뉴 3-1</a></li> <li><a href="#">서브메뉴 3-2</a></li> <li><a href="#">서브메뉴 3-3</a></li> <li><a href="#">서브메뉴 3-4</a></li> </ul> </li> </ul> </div>