이 글은 HTML 내비게이션 바 드롭다운 메뉴의 제작을 소개합니다. 글의 시작 부분에 모든 내비게이션 바 드롭다운 메뉴의 코드가 나와 있습니다. . 이 글을 함께 보시죠
우리가 이야기할 내용은 html 내비게이션 바 드롭다운 메뉴의 생성에 대한 것입니다. 먼저 완전한 예제 코드를 살펴보겠습니다: #🎜 🎜##🎜 🎜#<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>php中文网</span>
<div class="dropdown-content">
<p>Hello World!</p>
<p>Hello World!</p>
</div>
</div>
설명이 있으니 이해가 안 되셔도 됩니다.
html 탐색 모음 메뉴 예시 분석:html 탐색 모음 메뉴의 HTML 부분:
#🎜 🎜 # 또는
컨테이너 요소(예:html 탐색 모음 메뉴의 CSS 부분:
드롭다운 클래스는 위치: 상대를 사용하여 드롭의 내용을 설정합니다. - 드롭다운에 배치할 다운 메뉴 버튼의 오른쪽 하단 위치입니다(위치:절대 사용).
dropdown-content 클래스는 실제 드롭다운 메뉴입니다. 기본적으로 숨겨져 있으며 지정된 요소로 마우스를 이동한 후에 표시됩니다. 최소 너비 값은 160px로 설정되어 있습니다. 원하는 대로 수정할 수 있습니다. 참고: 드롭다운 콘텐츠를 드롭다운 버튼과 동일한 너비로 설정하려면 너비를 100%로 설정하세요(overflow:auto 설정은 작은 화면에서 스크롤할 수 있음). box-shadow 속성을 사용하여 드롭다운 메뉴를 "카드"처럼 보이게 만듭니다. :hover 선택기는 사용자가 드롭다운 버튼 위로 마우스를 이동할 때 드롭다운 메뉴를 표시하는 데 사용됩니다. 설명을 읽어보니 이제 조금 이해가 되셨나요? 위의 코드에 대한 설명을 살펴보면 이해가 될 것입니다. 이제 브라우저에 표시된 위 코드의 효과를 살펴보겠습니다.이것은 기본적으로 , 텍스트처럼 전혀 볼 수 없지만 마우스를 위로 올리면 다음과 같이 변경됩니다.
보세요, 이건 코드 효과는 탐색 모음 드롭다운 목록과 마우스를 위로 움직일 때만 반응하는 보이지 않는 탐색 모음이 있다는 것입니다.
네비게이션 바 드롭다운 메뉴를 간단하게 만든 것입니다. 궁금한 점이 있으면 아래에 메시지를 남겨주세요. 【에디터 추천】html 마키 태그에 이미지 스크롤을 설정하는 방법은 무엇인가요? 움직이는 태그에 대한 이미지 스크롤 코드 예
위 내용은 HTML 탐색 표시줄에 드롭다운 메뉴를 만드는 방법은 무엇입니까? 자세한 코드 예제는 다음과 같습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!