CSS에서 드롭다운 메뉴를 구현하는 방법-CSS 튜토리얼-php.cn

CSS에서 드롭다운 메뉴를 구현하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-05 16:10:31

원래의

13284명이 탐색했습니다.

방법: 먼저 div 요소를 사용하여 드롭다운 메뉴의 콘텐츠를 만들고 "display:none" 스타일을 설정하여 이를 숨긴 다음 마지막으로 " :hover" 선택기로 "display:block"을 설정합니다. 마우스를 드롭다운 버튼 위로 이동할 때 드롭다운 메뉴를 표시하는 데 사용되는 스타일입니다.

CSS에서 드롭다운 메뉴를 구현하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML 부분:

또는

컨테이너 요소(예:

)를 사용하여 드롭다운 메뉴의 콘텐츠를 만들고 원하는 곳에 배치하세요.

요소를 사용하여 이러한 요소를 래핑하고 CSS를 사용하여 드롭다운 콘텐츠의 스타일을 지정하세요.

CSS 부분:

.dropdown 클래스는 position:relative를 사용하여 드롭다운 메뉴의 내용이 드롭다운 버튼의 오른쪽 하단에 배치되도록 설정합니다(position:absolute 사용).

.dropdown-content 클래스는 실제 드롭다운 메뉴입니다. 기본적으로 숨겨져 있으며 지정된 요소로 마우스를 이동한 후에 표시됩니다. 최소 너비 값은 160px로 설정되어 있습니다. 원하는 대로 수정할 수 있습니다. 참고: 드롭다운 콘텐츠를 드롭다운 버튼과 동일한 너비로 설정하려면 너비를 100%로 설정하세요(overflow:auto 설정은 작은 화면에서 스크롤할 수 있음).

box-shadow 속성을 사용하여 드롭다운 메뉴를 "카드"처럼 보이게 만듭니다.

:호버 선택기는 사용자가 드롭다운 버튼 위로 마우스를 이동할 때 드롭다운 메뉴를 표시하는 데 사용됩니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>document</title>
<meta charset="utf-8">
<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;
}
.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>

<body>
<div class="dropdown">
    <span>鼠标移动到这里，会出现下拉列表</span>
    <div class="dropdown-content">
        <p>表单一</p>
        <p>表单一</p>
    </div>
</div>
</body>
</html>

로그인 후 복사

효과:

CSS에서 드롭다운 메뉴를 구현하는 방법