드롭다운 메뉴 효과를 얻기 위해 순수 CSS를 사용하는 방법을 알고 있습니까?

구체적인 구현 단계는 다음과 같습니다.

(권장 동영상 튜토리얼: css 동영상 튜토리얼)

1 ul 및 li 태그를 사용하여 연관 구조를 작성합니다(ul과 li 간의 상위-하위 관계는 다음과 같습니다). 자연스럽고 일반적인 연관 구조를 사용하세요)

<ul class="nav">
    <a href="#">服装</a>
    <ul class="plat">
        <li><a href="#">衬衫</a></li>
        <li><a href="#">棉袄</a></li>
        <li><a href="#">裤衩</a></li>
    </ul>
</ul>

2. 인터페이스를 초기화합니다

      *{
            padding: 0;
            margin: 0;
        }

3. ul 및 태그에 스타일을 추가합니다

 ul,a{
            font-size: 20px;
            list-style: none;
            text-decoration: none;
            background-color: #3C3C3C;
            color: #FFFFFF;
            width: 100px;
            text-align: center;
            border: 0px solid black;
            border-radius: 5px;  /*圆角*/
            margin-top: 1px;
        }
        a{
            display: block;
        }

4. : 호버 선택기; 기능 구현: 마우스를 라벨 위로 이동하면 콘텐츠의 숨겨진 부분이 표시됩니다

.plat{
            display: none;
        }

6. 지금까지는 사용자 경험을 최적화하기 위해 자신만의 스타일을 추가할 수 있습니다.

예:

수평으로 배열된 메뉴 모음:

.nav:hover .plat{
            display: block;
            clear: both;
        }

열 위로 마우스를 슬라이드하면 해당 위치가 표시됩니다.

.nav{
             float: left;
             margin-left: 1px;
         }

결과:

모든 코드는 다음과 같습니다.

`.plat li:hover>a{
            background-color: dimgrey;
        }`

관련 권장 사항:

CSS 튜토리얼

위 내용은 드롭다운 메뉴 효과를 얻기 위해 순수 CSS를 사용하는 방법을 알고 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!