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

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

Mary-Kate Olsen

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

원래의

270명이 탐색했습니다.

How Can I Create a Multi-Level Dropdown Menu Using Only CSS?

순수한 CSS 다단계 드롭다운 메뉴: 종합 가이드

CSS를 사용하여 다단계 드롭다운 메뉴를 만드는 것은 구성을 구성하는 강력한 기술이 될 수 있습니다. 복잡한 탐색 구조. 이전 방법이 여전히 존재할 수 있지만 이 문서에서는 순수 CSS를 사용하여 이 기능을 구현하는 현대적이고 효율적인 접근 방식을 제시합니다.

CSS에서 다단계 메뉴를 구성하는 핵심은 메뉴의 위치 및 표시 속성을 조작하는 데 있습니다. 항목. 드롭다운의 절대 위치 지정을 활용하고 디스플레이 속성으로 가시성을 제어함으로써 동적이고 사용자 정의 가능한 메뉴를 생성할 수 있습니다.

아래 제공된 코드는 3단계 드롭다운 메뉴 구조를 보여줍니다. 최상위 메뉴에는 4개의 기본 카테고리가 포함되어 있으며 각 카테고리에는 드롭다운이 가능합니다. 두 번째 및 세 번째 수준은 해당 상위 항목에서 수직으로 확장되어 명확한 계층적 보기를 제공합니다.

.third-level-menu {
    /* Position the third level menu absolutely within its parent */
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li {
    /* Define the appearance and height of third level menu items */
    height: 30px;
    background: #999999;
}

.third-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.second-level-menu {
    /* Position the second level menu absolutely within its parent */
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li {
    /* Position and define the appearance of second level menu items */
    position: relative;
    height: 30px;
    background: #999999;
}

.second-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu {
    /* Style the top level menu as a horizontal list */
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li {
    /* Position and define the appearance of top level menu items */
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}

.top-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu li:hover > ul {
    /* Display the next level menu on hover */
    display: inline;
}

/* Styles for the menu links */

.top-level-menu a {
    /* Styling for all links within the menu */
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Stretch the link to cover the entire menu item */
    display: block;
    line-height: 30px;
}

.top-level-menu a:hover {
    /* Change link color on hover */
    color: #000000;
}

로그인 후 복사

이 메뉴를 HTML로 구현하려면 다음 마크업을 사용하세요.