CSS Dropdown menu 만들기 :hover 효과 이용하기

JavaScript를 쓰지않고 CSS 로만 Dropdown 메뉴를 만들어 보도록 하겠습니다.

핵심은 :hover 효과와 display:none; 속성을 잘 활용하는 것.

 

:hover = mouse를 올렸을 때 라는 경우의 수

display = 요소를 어떻게 보여줄지 결정하는 css 속성

---

1. dropdown menu를 ul li ul 로 html 짠 경우

결과 화면

html 코드 (일부)

<!--메뉴 영역-->
<div class="dropdown_menu">
	<!-- hover 될 메인 메뉴 -->
    <ul id="gnb">
      <li>
        <a href="#">slide1 <b>▼</b></a>
        <!--서브메뉴↓↓-->
        <ul class="sub_menu">
          <li><a href="#">sub_slide1</a></li>
          <li><a href="#">sub_slide2</a></li>
        </ul>
      </li>
      <li>
        <!-- slide 2 -->
      </li>
      <li>
        <!-- slide 3 -->
      </li>
    </ul>
  </div>

 

css 적용 (일부)

/* 서브메뉴 숨기기 */
#gnb li ul{
  display:none;
}

/*메인메뉴 <li> 마우스가 올라가면 텍스트 아래 검은 테두리 만들기 */
#gnb > li:hover > a{
  border-bottom:3px solid black;
}

/* 메인메뉴 <li> 마우스 올리면 서브메뉴 보이기 이 때 테두리도 검정색으로 만들기*/
#gnb li:hover ul{
  display:block;
  border:1px solid black;
}

/* 서브메뉴 <li> 태그에 마우스 올리면 텍스트 아래쪽 테두리를 검정색으로 만들기*/
#gnb li ul li:hover a{
  border-bottom:3px solid black;
}

1. 서브메뉴를 숨긴다.

2. 기준이 되는 (#gnb li)에다가 이벤트(:hover)를 발생시켜 서브메뉴 보이기

※display는 보통 block으로 사용되지만 inline-block으로 처리해도 상관은 없다. css style에 따라 다름.

 

 

서브메뉴 가로 길이가 화면 꽉 채워져 있다면?

서브메뉴 width:100%;

위 사진과 같이 서브메뉴가 화면 꽉채워져 있다면 아래와 같이 짜면 된다.

그 안의 내용물은 float 또는 display:flex 배치 정렬을 해주기로 하자.

#gnb li ul{
  display:none;
  width:100%;
  left:0;
}