테스트 사이트 - 개발 중인 베타 버전입니다

CSS 드롭 다운

기본 드롭 다운

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

 

<style>

.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;

}

</style>

 

<div class="dropdown">

  <span>Mouse over me</span>

  <div class="dropdown-content">

    <p>Hello World!</p>

  </div>

</div>

 

 


 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

좋은 정보 감사합니다.

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기