드롭다운 메뉴 (css 활용)

오늘 포스팅은 홈페이지에서 자주 사용하는 메뉴 구성을 해보겠습니다.

 

보통 드롭다운 메뉴라고하면, 메뉴에 마우스를 갖다댔을때 숨어있던 세부 메뉴가 노출됩니다.

 

 

먼저 ul li 태그 이용해서 메뉴를 구성합니다.

 

<ul class="drop_menu">
	<li><a href="#">홈</a></li>
    <li><a href="#">메뉴1</a>
    	<ul>
          <li><a href="#">세부1-1</a></li>
          <li><a href="#">세부1-2</a></li>
          <li><a href="#">세부1-3</a></li>
        </ul>
    </li>
    <li><a href="#">메뉴2</a>
    	<ul>
          <li><a href="#">세부2-1</a></li>
          <li><a href="#">세부2-2</a></li>
          <li><a href="#">세부2-3</a></li>
        </ul>
    </li>
    <li><a href="#">메뉴3</a>
    	<ul>
          <li><a href="#">세부3-1</a></li>
          <li><a href="#">세부3-2</a></li>
          <li><a href="#">세부3-3</a></li>
        </ul>
    </li>
</ul>

 

대메뉴 쪽에 세부메뉴를 사용할 곳에 ul li 를 더 넣어서 구성해줍니다. 

그후에 ul li 안에 들어가있는 세부메뉴는 css 에서 display:none을 이용해서 숨겨주고 대메뉴에 마우스 오버시

출력되게 할 것입니다.

 

.menu > li{line-height:40px;height:40px;float:left;width:calc(10% - 1px);background:rgba(0,0,0,0.5);margin-right:1px;text-align:center;}
.menu > li > ul {width:calc(10% - 1px); position: absolute; font-size:14px; background:rgba(170,170,170,0.7);display:none;}

/*마우스 오버시 display block 으로 노출 시킴 */
.menu > li:hover > ul {
		display:block;
}

위 처럼 css를 적용하면 

 

마우스 오버시에 드롭다운 메뉴 구성이 끝납니다.