집 > 기사 > 웹 프론트엔드 > 간단한 드롭다운 메뉴 효과를 구현하는 순수 CSS 코드

간단한 드롭다운 메뉴 효과를 구현하는 순수 CSS 코드

王林앞으로: 2020-09-03 16:54:502126검색

구현 방법:

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 부분의 내용

.plat{
            display: none;
        }

5. (여기에 강조 표시가 있습니다.) 사용: 첫 번째 a 태그에 대한 호버 선택기 기능 실현: 마우스가 a 태그 위로 이동하면 내용의 숨겨진 부분이 표시됩니다

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

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

예:

수평으로 배열된 메뉴 막대:

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

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

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

효과 :

간단한 드롭다운 메뉴 효과를 구현하는 순수 CSS 코드

(학습 영상 추천: css 영상 튜토리얼)

모든 코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        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;
        }

        .plat{
            display: none;
        }
        .nav{
             float: left;
             margin-left: 1px;
         }
        .nav:hover .plat{
            display: block;
            clear: both;
        }
        .plat li:hover>a{
            background-color: dimgrey;
        }
    </style>
</head>
<body>
<ul>
    <a href="#">服装</a>
    <ul>
        <li><a href="#">衬衫</a></li>
        <li><a href="#">棉袄</a></li>
        <li><a href="#">裤衩</a></li>
    </ul>
</ul>
<ul>
    <a href="#">服装</a>
    <ul>
        <li><a href="#">衬衫</a></li>
        <li><a href="#">棉袄</a></li>
        <li><a href="#">裤衩</a></li>
    </ul>
</ul>
<ul>
    <a href="#">服装</a>
    <ul>
        <li><a href="#">衬衫</a></li>
        <li><a href="#">棉袄</a></li>
        <li><a href="#">裤衩</a></li>
    </ul>
</ul>
</body>
</html>

위 내용은 간단한 드롭다운 메뉴 효과를 구현하는 순수 CSS 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：CSS를 사용하여 div에 그림자 효과를 추가하는 방법다음 기사：CSS를 사용하여 div에 그림자 효과를 추가하는 방법