CSS만 사용하여 다단계 드롭다운 메뉴를 어떻게 만들 수 있나요?-CSS 튜토리얼-php.cn

CSS만 사용하여 다단계 드롭다운 메뉴를 어떻게 만들 수 있나요?

Susan Sarandon

풀어 주다： 2024-11-29 20:57:13

원래의

180명이 탐색했습니다.

How Can I Create Multi-Level Drop-Down Menus Using Only CSS?

순수 CSS로 다단계 드롭다운 메뉴 만들기

CSS 전용 다단계 드롭다운 메뉴는 깔끔하고 접근하기 쉬운 메뉴를 제공합니다. 웹사이트의 복잡한 탐색 구조를 구성하는 방법입니다. 다양한 접근 방식이 있지만 최적의 솔루션은 원하는 미적 측면과 기능에 따라 다릅니다.

효과적인 기술 중 하나는 중첩된 목록 구조를 활용하고 하위 메뉴를 절대적으로 배치하는 것입니다.

.third-level-menu
{
    -
    position: absolute;
    top: 0;
    right: 150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

로그인 후 복사

이것은 코드는 상위 메뉴 항목의 오른쪽에 위치할 세 번째 수준 하위 메뉴를 정의합니다.

.second-level-menu
{
    -
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

로그인 후 복사

마찬가지로 이 메뉴도 코드는 상위 메뉴 항목 아래에 위치할 두 번째 수준 하위 메뉴를 정의합니다.

.top-level-menu
{
    -
    list-style: none;
    padding: 0;
    margin: 0;
}

로그인 후 복사

이 코드는 상위 메뉴 항목을 포함하는 최상위 메뉴를 정의합니다.

상위 메뉴 항목 위에 마우스를 올렸을 때 하위 메뉴를 표시하려면:

.top-level-menu li:hover > ul
{
    -
    /* On hover, display the next level's menu */
    display: inline;
}

로그인 후 복사

또한 메뉴 링크와 목록 항목에 스타일을 적용할 수 있습니다. 시각적인 맞춤화를 위해.

위 내용은 CSS만 사용하여 다단계 드롭다운 메뉴를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!