%% 같은 컨테이너 요소를 사용하여 드롭다운 콘텐츠를 만들고, 그 안에 원하는 내용을 추가합니다.\\
\\
CSS를 사용하여 드롭다운 콘텐츠를 올바르게 배치하려면 %%
%% 요소로 요소 주위를 감쌉니다(wrap).\\
\\
**%%CSS)%%** ''%%.dropdown%%'' 클래스는 ''%%position : relative%%''를 사용하는데, 드롭다운 콘텐츠를 드롭다운 버튼(''%%position:absolute%%'' 사용) 바로 아래에 배치하려는 경우 필요합니다.\\
\\
''%%.dropdown-content%%'' 클래스는 실제 드롭다운 콘텐츠를 보유합니다. 기본적으로 숨겨져 있으며 마우스 오버 시 표시됩니다(아래 참조).\\
''%%min-width%%''는 160px로 설정되어 있습니다. 이것을 자유롭게 변경하십시오.\\
**Tip:** 드롭다운 콘텐츠의 너비를 드롭다운 버튼만큼 넓게 하려면, ''%%width%%''를 100%로 설정합니다.\\
그리고 작은 화면에서 스크롤을 활성화 하도록 ''%%overflow : auto%%''으로 설정합니다.\\
\\
보더를 사용하는 대신, CSS ''%%box-shadow%%'' 속성을 사용하여 드롭다운 메뉴를 "카드"처럼 보이게 했습니다.\\
\\
''%%:hover%%'' 셀렉터는 사용자가 드롭다운 버튼 위로 마우스를 이동할 때 드롭다운 메뉴를 표시하는 데 사용됩니다.\\
\\
=====Dropdown Menu=====
사용자가 목록에서 옵션을 선택하는 드롭다운 메뉴를 만듭니다.\\
{{:wiki:css:css_note:dropdownmenu.png?400|}}\\
하기 예제는 드롭다운 박스 안에 링크를 추가하고 링크에 스타일을 설정하여 스타일링된 드롭다운 버튼에 알맞게 한다는 것 이외에는 이전 예제와 유사합니다.\\
====예제====
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-aligned Dropdown Content=====
{{:wiki:css:css_note:aligneddropdowncontent.png?400|}}\\
드롭다운 메뉴를 왼쪽에서 오른쪽 대신, 오른쪽에서 왼쪽으로 이동하려면 ''%%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.
======More Examples======
=====Dropdown Image=====
드롭다운 박스 안에 이미지와 다른 콘텐츠를 추가하는 방법\\
{{:wiki:css:css_note:dropdownimage.png?400|}}\\
====예제====
Dropdown Image
Move the mouse over the image below to open the dropdown content.
Beautiful Cinque Terre
\\
=====Dropdown Navbar=====
네비게이션 바 안에 드롭다운 메뉴를 추가하는 방법\\
{{:wiki:css:css_note:dropdown-navbar.png?400|}}\\
====예제====
Dropdown Menu inside a navigation Bar
Hover over the "Dropdown" link to see the dropdown menu.
{{tag>오션 CSS Dropdowns}}