CSS Dropdowns

Create a hoverable dropdown with CSS.

css 로 hoveable 한 dropdown을 만들어라.

 

Demo: Dropdown Examples

Move the mouse over the examples below:

 

아래 예제에 마우스를 옮겨라

 

Basic Dropdown

Create a dropdown box that appears when the user moves the mouse over an element.

 

기본적인 드롭다운

사용자가 요소 위에 마우스를 올릴때, 생겨지는 드롭다운을 만들어라.

 

 

Example Explained

HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element.

Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it.

Wrap a <div> element around the elements to position the dropdown content correctly with CSS.

 

CSS) The .dropdown class uses position:relative, which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute).

The .dropdown-content class holds the actual dropdown content. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the CSS box-shadow property to make the dropdown menu look like a "card".

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

 

예제를 설명 하자면,

html ) 버튼이나 <span>과 같이 내용을 드롭다운 하기 위한 요소를 사용하라.

드롭다운 내용물을 만들기 위해선, <div>와 같은 컨테이너 요소를 사용하라. 그리고 이것 안에 너가 원하는 것을 추가하라.

css로 명확하게 내용물을 포지션하기 위해서 div요소 주변에 요소를 감싸라?

 

css dropdown 클래스는 position:relative를 사용한다. 그것은 드롭다운 버튼 바로 아래에 드롭다운 내용물을 위치하는 것을 원할때, 필요료하다.

dropdown-content 클래스는 실제 드롭다운 내용물을 잡는다. 기본적으로는 감쳐져있지만, 이것은 마우스가 위에 있을때 보여진다. 최소넓이가 160px로 설정되어있음을 주의하라. 이것을 변경하는 것은 자유다. 

팁: 만일 드롭다운 내용물의 넓이가 드롭다운 버튼만큼 넓어지길 원한다면, width를 100%로 설정하라.

테두리를 사용하는 것 대신에, 우리는 CSS box-shadow 속성을 사용해왔다. 카드처럼 다롭다운을 만들기위해서

:hover 선택자는 사용자가 드롭다운 버튼에 마우스를 올렸을때, 드롭다운메뉴를 보여주기 위해 사용되었다.

 

Dropdown Menu

Create a dropdown menu that allows the user to choose an option from a list:

 

사용자가 리스트로부터 옵션을 선택하는 것을 허용하는 드롭다운 메뉴를 만들어라.

 

This example is similar to the previous one, except that we add links inside the dropdown box and style them to fit a styled dropdown button:

 

드롭다운 박스 안에 링크를 추가한것과 스타일된 드롭다운 버튼을 맞추기 위해 스타일링 한것 을 제외 하면 위의 예제와 비슷하다.