首页 >web前端 >css教程 >css如何写二级下拉菜单

css如何写二级下拉菜单

藏色散人原创: 2021-01-04 09:27:204007浏览

css写二级下拉菜单的方法：首先创建一个HTML示例文件；然后使用css的display属性控制二级下拉菜单的显示与否；最后通过浏览器查看运行效果即可。

css如何写二级下拉菜单

本教程操作环境：Dell G3电脑、Windows7系统、Chrome76.0&&CSS3版本。

推荐：《css视频教程》

纯CSS实现二级导航下拉菜单

思想：

使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时，显示二级导航菜单的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如何写二级下拉菜单

以上是css如何写二级下拉菜单的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css网格布局（grid）的常用属性介绍下一篇：图片之间的间隔css怎么设置

查看更多