How to write a secondary drop-down menu in css-CSS Tutorial-php.cn

How to write a secondary drop-down menu in css

藏色散人

Release： 2023-01-04 09:38:29

Original

4021 people have browsed it

How to write a secondary drop-down menu in css: first create an HTML sample file; then use the display attribute of css to control whether the secondary drop-down menu is displayed or not; and finally check the running effect through the browser.

How to write a secondary drop-down menu in css

The operating environment of this tutorial: Dell G3 computer, Windows7 system, Chrome76.0&&CSS3 version.

Recommendation: "css video tutorial"

Pure CSS to implement secondary navigation drop-down menu

Thought:

Use the display attribute of css to control whether the secondary drop-down menu is displayed or not. When the mouse moves to the li tag of the first-level navigation menu, the ul tag of the second-level navigation menu is displayed. Since the implementation is relatively simple, the reference code is given directly here.

Pure CSS secondary navigation drop-down menu code

<!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>

Copy after login

Running effect:

How to write a secondary drop-down menu in css

The above is the detailed content of How to write a secondary drop-down menu in css. For more information, please follow other related articles on the PHP Chinese website!