CSS로 호버할 수 있는(hoverable) 드롭다운 메뉴를 만듭니다.

사용자가 요소 위에 마우스를 올렸을 때 나타나는 드롭다운 박스를 만듭니다.

Hoverable Dropdown

Move the mouse over the text below to open the dropdown content.

HTML) 예를 들어 <span> 또는 <button> 요소와 같은 임의의 요소를 사용하여 드롭다운 콘텐츠를 엽니다.

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

CSS를 사용하여 드롭다운 콘텐츠를 올바르게 배치하려면 <div> 요소로 요소 주위를 감쌉니다(wrap).

CSS) .dropdown 클래스는 position : relative를 사용하는데, 드롭다운 콘텐츠를 드롭다운 버튼(position:absolute 사용) 바로 아래에 배치하려는 경우 필요합니다.

.dropdown-content 클래스는 실제 드롭다운 콘텐츠를 보유합니다. 기본적으로 숨겨져 있으며 마우스 오버 시 표시됩니다(아래 참조).
min-width는 160px로 설정되어 있습니다. 이것을 자유롭게 변경하십시오.
Tip: 드롭다운 콘텐츠의 너비를 드롭다운 버튼만큼 넓게 하려면, width를 100%로 설정합니다.
그리고 작은 화면에서 스크롤을 활성화 하도록 overflow : auto으로 설정합니다.

보더를 사용하는 대신, CSS box-shadow 속성을 사용하여 드롭다운 메뉴를 “카드”처럼 보이게 했습니다.

:hover 셀렉터는 사용자가 드롭다운 버튼 위로 마우스를 이동할 때 드롭다운 메뉴를 표시하는 데 사용됩니다.

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

하기 예제는 드롭다운 박스 안에 링크를 추가하고 링크에 스타일을 설정하여 스타일링된 드롭다운 버튼에 알맞게 한다는 것 이외에는 이전 예제와 유사합니다.