HTML 탐색 표시줄에 드롭다운 메뉴를 만드는 방법은 무엇입니까? 자세한 코드 예제는 다음과 같습니다.

이 글은 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를 사용하여 드롭다운 콘텐츠의 스타일을 지정합니다.

html 탐색 모음 메뉴의 CSS 부분:

드롭다운 클래스는 위치: 상대를 사용하여 드롭의 내용을 설정합니다. - 드롭다운에 배치할 다운 메뉴 버튼의 오른쪽 하단 위치입니다(위치:절대 사용).

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

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

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

설명을 읽어보니 이제 조금 이해가 되셨나요? 위의 코드에 대한 설명을 살펴보면 이해가 될 것입니다.

이제 브라우저에 표시된 위 코드의 효과를 살펴보겠습니다.

이것은 기본적으로 , 텍스트처럼 전혀 볼 수 없지만 마우스를 위로 올리면 다음과 같이 변경됩니다.

보세요, 이건 코드 효과는 탐색 모음 드롭다운 목록과 마우스를 위로 움직일 때만 반응하는 보이지 않는 탐색 모음이 있다는 것입니다.

네비게이션 바 드롭다운 메뉴를 간단하게 만든 것입니다. 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

【에디터 추천】

html 마키 태그에 이미지 스크롤을 설정하는 방법은 무엇인가요? 움직이는 태그에 대한 이미지 스크롤 코드 예

html에서 글꼴 색상을 설정하는 방법은 무엇입니까? CSS에서 글꼴 색상을 설정하는 방법 소개

위 내용은 HTML 탐색 표시줄에 드롭다운 메뉴를 만드는 방법은 무엇입니까? 자세한 코드 예제는 다음과 같습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!