如何写一个二级菜单

2023年2月18日 78次阅读 来源: minimore_zhd

相信现在的你打开任何一个网页，它的导航栏的内容绝对会决定是是否浏览下去的关键因素，今天就来教大家如何书写一个二级菜单。
对于一个正常网页来说，其正常的内容都显示在中间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
    原文地址: https://blog.csdn.net/minimorezhd/article/details/109890808
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞