CSS3 드롭다운dropdown 메뉴 만들기

CSS3로 간단한 드롭다운dropdown 메뉴를 만들어 보겠습니다.  

HTML 마크업

 

메인메뉴는 Home, Products, Company, Address가 있으며 ul 안에 li 로 되어 있습니다. 서브메뉴는 Products에 딸려있으며, 다시 ul 안에 li 로 반복되는 구조입니다.

 

<div class="menubar">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#" id="current">Products</a>
         <ul>
           <li><a href="#">Sliders</a></li>
           <li><a href="#">Galleries</a></li>
           <li><a href="#">Apps</a></li>
           <li><a href="#">Extensions</a></li>
         </ul>
      </li>
      <li><a href="#">Company</a></li>
      <li><a href="#">Address</a></li>
   </ul>
</div>
			  

CSS

 

서브메뉴 부분만을 짚고 가겠습니다. .menubar li 까지는 메인메뉴이고, 다음에 ul은 서브메뉴의 ul이죠. 결국 서브메뉴의 ul 스타일 입니다. 중요한 점은 display를 none으로 해서 마우스커서를 올리기 전 평상시에는 서브메뉴가 보이지 않게 하는 겁니다.

 

.menubar li ul {
background: rgb(109,109,109);
display:none;  /* 평상시에는 서브메뉴가 안보이게 하기 */
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
}
			  

 

그러고선 .menubar li 에 마우스 커서를 올릴 경우(:hover) 서브메뉴(ul)에 대한 스타일 지정입니다. Products에 마우스 커서가 올라가면, 당연 서브메뉴가 보여야겠죠. display를 block으로 지정합니다.

.menubar li:hover ul {
display:block;   /* 마우스 커서 올리면 서브메뉴 보이게 하기 */
}
	

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.