순수 CSS를 사용하여 드롭다운 메뉴를 구현하는 방법에 대한 튜토리얼

이 글에서는 주로 순수 CSS에서 드롭다운 메뉴를 구현하기 위한 샘플 코드를 소개합니다. 편집자 입장에서는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

드롭다운 메뉴의 ul 높이를 0으로 설정하고 초과된 부분을 숨깁니다.

전환 효과를 추가하려면 드롭다운 메뉴의 높이를 설정하세요. 높이가 자동이면 전환 효과가 무효화됩니다.

<style>
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul li a{
        display: block;
        text-decoration: none;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: white;
        background-color: #2f3e45;
    }
    .drop-down{
        width: 100px;
        height: 50px;
    }
    .drop-down-content{
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: all 1s ease;
    }

    p{
        font-size: 20px;
        margin: 0;
    }
    .drop-down-content li:hover a{
        background-color: red;
    }
    .nav .drop-down:hover .drop-down-content{
        opacity: 1;
        height: 150px;
    }
</style>
<ul class="nav">
    <li class="drop-down">
        <a href="#">下拉菜单</a>
        <ul class="drop-down-content">
            <li><a href="#">菜单1</a></li>
            <li><a href="#">菜单2</a></li>
            <li><a href="#">菜单3</a></li>
        </ul>
    </li>
</ul>
<p>内容</p>

렌더링은 다음과 같습니다:

jQuery의 드롭다운 메뉴 메소드 공유 구현

사용방법 A 드롭다운 메뉴를 완성하기 위한 Vue의 사용자 정의 지침

css3

을 사용하여 애니메이션 드롭다운 메뉴 효과를 구현하는 단계

위 내용은 순수 CSS를 사용하여 드롭다운 메뉴를 구현하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!