[css 응용] 스크립트 없이 드롭다운 메뉴 만들기 (drop down menu)

마우스를 오버해서 나타나는 드롭다운 메뉴를 만드는데에

html 구조와 css만을 이용해서 작업할 수 있다.

 

1. html 구조 만들기

단순히 css만 이용한다고해서 드롭다운 메뉴를 만들 수 있는 것은 아니다.

css의 :hover 가상클래스를 사용해서 드롭다운 메뉴를 노출시켜야 하기 때문에

:hover 가상클래스를 사용할 수 있는 구조로 만들어야 한다.

<ul class="menu">
  <li>
    <a href="#">MENU 1</a>
    <ul class="depth_1">
      <li><a href="#">MENU 1_1</a></li>
      <li><a href="#">MENU 1_2</a></li>
      <li><a href="#">MENU 1_3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">MENU 2</a>
  </li>
  <li>
    <a href="#">MENU 3</a>
    <ul class="depth_1">
      <li><a href="#">MENU 3_1</a></li>
      <li><a href="#">MENU 3_2</a></li>
    </ul>
  </li>
</ul>

위와 같이 각 MENU 1 ~ MENU 3 영역과 그 내부에 있는 depth_1을 하나의 li태그에 넣어야

css로 제어할 수 있다.

 

2. css 사용

위 html 구조에서 설명한 바와 같이

:hover를 걸 요소와 노출을 시킬 드롭다운 영역을 부모 자식 요소로 배치를 해야

:hover 가상클래스를 걸 수 있다.

.menu:after{display:block; content:''; clear:both;}
.menu > li{position:relative; float:left; margin-right:5px;}
.menu > li > a{display:block; padding:0 15px; background:#333; height:40px; line-height:40px; color:#fff;}
.menu > li:hover .depth_1 {display:block;}
.menu .depth_1{display:none; position:absolute; left:0; right:0; text-align:center;}
.menu .depth_1 a{display:block; padding:5px; background:#666; color:#fff;}

css를 넣을 때 주의 할 점은 .menu > li > a:hover 처럼 a태그에 hover를 걸게 되면

마우스가 a태그를 벗어나면 바로 .depth_1 영역이 닫히기 때문에 li태그에 :hover를 걸어줘야한다.

 

3. 예시