如何写一个二级菜单

最新推荐文章于 2022-09-13 11:19:44 发布

minimore_zhd

最新推荐文章于 2022-09-13 11:19:44 发布

阅读量1.9k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/minimorezhd/article/details/109890808

版权

相信现在的你打开任何一个网页，它的导航栏的内容绝对会决定是是否浏览下去的关键因素，今天就来教大家如何书写一个二级菜单。
对于一个正常网页来说，其正常的内容都显示在中间1200px里面，所以我们要把这个导航栏的框建好。
在这里插入图片描述

在这里插入图片描述
浏览器显示效果如下
大家也都知道一级菜单是大部分是通过li来写的，其实二级菜单也是用li写的。我们只需在以有的ul li里面再写一个盒子加上一个ul li。
在css里面也只需通过display来显示的隐藏二级菜单。
在这里插入图片描述网页显示效果如下

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
     .wrapper{
         width: 100%;
         height: 50px;
         background-color: aqua;
     }
     .header-wrapper{
         width: 1200px;
         height: 50px;
         background-color: beige;
         margin: 0 auto;
     }
     .sec-menu{
         display: none;
     }
     .first-menu a{
         line-height: 50px;
     }
     .first-menu:hover .sec-menu{
         display: block;
         line-height: 50px;    
     }
     .first-menu:hover .sec-menu li{
         width: 150px;
         height: 50px;
         background-color: chocolate;
     }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header-wrapper">
            <ul class="first-menu">
                <li>
                    <a href="#">一级菜单</a>
                    <div>
                        <ul class="sec-menu">
                        <li>这是一个二级菜单</li>
                        <li>这是一个二级菜单</li>
                        <li>这是一个二级菜单</li>
                        <li>这是一个二级菜单</li>
                        <li>这是一个二级菜单</li>
                        <li>这是一个二级菜单</li>
                        <li>这是一个二级菜单</li>
                     </ul>
                    </div> 
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

minimore_zhd

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何写一个二级菜单

相信现在的你打开任何一个网页，它的导航栏的内容绝对会决定是是否浏览下去的关键因素，今天就来教大家如何书写一个二级菜单。对于一个正常网页来说，其正常的内容都显示在中间1200px里面，所以我们要把这个导航栏的框建好。浏览器显示效果如下大家也都知道一级菜单是大部分是通过li来写的，其实二级菜单也是用li写的。我们只需在以有的ul li里面再写一个盒子加上一个ul li。在css里面也只需通过display来显示的隐藏二级菜单。网页显示效果如下完整代码如下<!DOCTYPE html&g
复制链接

扫一扫