CSS만 사용하여 다단계 드롭다운 메뉴를 만드는 방법은 무엇입니까?

순수한 CSS를 사용하여 다단계 드롭다운 메뉴 만들기

순수한 CSS를 사용하여 다단계 드롭다운 메뉴를 구현하는 방법은 당신이 언급한 초기 솔루션. 세련되고 유지 관리가 용이한 구현을 제공하는 현대적인 접근 방식은 다음과 같습니다.

이 방법은 중첩된 순서가 없는 목록(

)과 절대 위치 지정의 조합을 활용하여 다중 레벨 구조를 만듭니다. 메뉴의 각 레벨은 별도의
요소이며 해당 위치는 상위 요소에 따라 동적으로 제어됩니다.

다음 코드 조각은 메뉴에 대한 CSS 스타일을 제공합니다.

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

.third-level-menu > li {
    height: 30px;
    background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }

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

.second-level-menu > li {
    position: relative;
    height: 30px;
    background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }

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

.top-level-menu > li {
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }

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

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

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }

메뉴의 HTML 구조는 다음과 같습니다. :

<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

이 접근 방식을 사용하면 메뉴가 반응성을 유지하고 다양한 화면 크기와 장치 방향에 적응할 수 있습니다. 또한 JavaScript가 필요하지 않으므로 모든 브라우저와 호환됩니다.

위 내용은 CSS만 사용하여 다단계 드롭다운 메뉴를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!