CSS를 사용하여 호버블 드롭다운을 만듭니다.

기초 드롭다운(Basic Dropdown)

사용자가 요소 위에서 마우스를 움직일 때 나타나는 드롭다운 상자를 만듭니다.

<div class="dropdown">
  <span>마우스를 올려보세요.</span>
  <div class="dropdown-content">
    <p>안녕하세요!</p>
  </div>
</div>

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

설명 

HTML : 

<span> 또는 <button> 요소를 포함 할 수 있습니다.

<div>와 같은 컨테이너 요소를 사용하여 드롭다운 콘텐츠를 만들고 내부에 원하는 것을 추가합니다.

CSS를 사용하여 드롭다운 내용을 올바르게 배치하려면 <div> 요소를 요소 주위에 랩핑하십시오.

CSS : 

.dropdown 클래스는 position : relative를 사용합니다. 드롭다운 버튼을 드롭다운 버튼 바로 아래에 배치하고자 할 때 필요합니다 (position : absolute 사용).

.dropdown-content 클래스는 실제 드롭다운 콘텐츠를 보유합니다. 기본적으로 숨겨져 있으며 호버에 표시됩니다

** 드롭다운 컨텐츠의 너비를 드롭다운 버튼만큼 넓히려면 너비를 100%로 설정하십시오 (overflow : auto를 사용하면 작은 화면에서 스크롤 할 수 있습니다).

테두리를 사용하는 대신 CSS box-shadow 속성을 사용하여 드롭다운 메뉴를 "카드"처럼 보이게 했습니다.

:hover 선택기는 사용자가 드롭다운 버튼 위로 마우스를 움직일 때 드롭다운 메뉴를 표시하는 데 사용됩니다.

드롭다운 메뉴

사용자가 목록에서 옵션을 선택할 수 있는 드롭다운 메뉴를 만듭니다.

이 예제는 이전 예제와 비슷하지만 드롭다운 상자 안에 링크를 추가하고 스타일 있는 드롭다운 단추에 맞게 스타일을 지정한다는 점만 제외하면 다음과 같습니다.

<div class="dropdown">
  <button class="dropbtn">웹강좌</button>
  <div class="dropdown-content">
    <a href="#">HTML 강좌</a>
    <a href="#">CSS 강좌</a>
    <a href="#">Javascript 강좌</a>
  </div>
</div>

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

오른쪽 정렬된 드롭다운 컨텐츠 

드롭다운 메뉴를 왼쪽에서 오른쪽으로 이동하는 대신 오른쪽에서 왼쪽으로 이동하려면 right: 0;을 추가하십시오.

.dropdown-content {
  right: 0;
}