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 셀렉터는 사용자가 드롭다운 버튼 위로 마우스를 이동할 때 드롭다운 메뉴를 표시하는 데 사용됩니다.

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

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

Dropdown Menu

Move the mouse over the button to open the dropdown menu.

Note:We use href="#" for test links. In a real web site this would be URLs

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

Aligned Dropdown Content

Determine whether the dropdown content should go from left to right or right to left with the left and right properties.

드롭다운 박스 안에 이미지와 다른 콘텐츠를 추가하는 방법

Dropdown Image

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

Beautiful Cinque Terre

네비게이션 바 안에 드롭다운 메뉴를 추가하는 방법

• Home
• News
• Dropdown
  Link 1 Link 2 Link 3

Dropdown Menu inside a navigation Bar

Hover over the "Dropdown" link to see the dropdown menu.