CSS에서 보조 드롭다운 메뉴를 작성하는 방법-CSS 튜토리얼-php.cn

CSS에서 보조 드롭다운 메뉴를 작성하는 방법

藏色散人

풀어 주다： 2023-01-04 09:38:29

원래의

4008명이 탐색했습니다.

Css에서 보조 드롭다운 메뉴를 작성하는 방법: 먼저 HTML 샘플 파일을 만든 다음 CSS의 표시 속성을 사용하여 보조 드롭다운 메뉴 표시 여부를 제어하고 마지막으로 실행 효과를 확인합니다. 브라우저.

CSS에서 보조 드롭다운 메뉴를 작성하는 방법

이 튜토리얼의 운영 환경: Dell G3 컴퓨터, Windows 7 시스템, Chrome76.0&&CSS3 버전.

권장: "css 비디오 튜토리얼"

보조 탐색 드롭다운 메뉴를 구현하는 순수 CSS

아이디어:

Css의 표시 속성을 사용하여 보조 드롭다운 메뉴를 표시할지 여부를 제어합니다. 아니다. 1단계 탐색 메뉴의 li 태그로 마우스를 이동하면 2단계 탐색 메뉴의 ul 태그가 표시됩니다. 구현이 비교적 간단하기 때문에 여기에 참조 코드가 직접 제공됩니다.

순수한 CSS 보조 탐색 드롭다운 메뉴 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="content-type">
    <title>纯css二级导航下拉菜单</title>
    <meta name="keyword" content="关键字">
    <meta name="description" content="描述">
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #bg{background: red;width: 100%;height: 35px;}
        nav{height: 35px;width: 1000px;margin: 0 auto;}
        nav ul li{list-style-type:none;float: left}
        nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;
        text-align: center;color:white;font-fimily:微软雅黑;}
        nav ul li ul li{float: none}
        nav ul li ul li a{color:black}
        nav ul li ul{display: none;}
        nav ul li:hover ul{display: block;}
    </style>
</head>
<body>
<div id="bg">
<nav>
    <ul>
        <li><a href="#">一级导航</a>
        <ul>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
        </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
    </ul>
</nav>
</div>
</body>
</html>

로그인 후 복사

작동 효과:

CSS에서 보조 드롭다운 메뉴를 작성하는 방법