CSS 드롭 다운 > 퍼블리셔팁

퍼블리셔팁

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

CSS 드롭 다운 정보

CSS 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>

 

 

c4020c4a3ebfd47467ebcf5a9053df60_1497280200_8138.gif
 

스폰서링크

댓글 전체

전체 1,149
퍼블리셔팁 내용 검색

회원로그인

진행중인 포인트경매

  1. 첨단보안 역해킹과 해커박스

    참여9 회 시작17.12.15 10:22 종료17.12.20 10:22
  2. 홈플러스 모바일 쿠폰 50,000원

    참여76 회 시작17.12.13 22:51 종료17.12.18 22:51
  3. MySQL Advanced Class (그누보드5는 MySQL을 사용합니다.)

    참여14 회 시작17.12.13 10:17 종료17.12.18 10:17

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT