用html和css实现一个简单的二级菜单

原创已于 2022-07-11 11:32:48 修改 · 201 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

于 2022-07-09 09:24:14 首次发布

这篇博客展示了如何使用HTML和CSS创建一个简单的二级菜单。通过CSS样式设置，实现了菜单项的布局、颜色、边框和悬停效果，当鼠标悬停在二级菜单的父级菜单项上时，二级菜单会显示出来。

效果图：

css全部代码内容：

<style>

* {
               margin: 0;
               padding: 0;
           }

           li {
               list-style: none;
           }

           a {
               text-decoration: none;
               color: white;
           }

           .wraper {
               width: 1250px;
               margin: 0 auto;
               background-color:burlywood;
               height: 50px;
               border: 1px solid white;
               border-radius: 20px 20px;
           }

           .wraper>ul>li {
               float: left;
           }

           .nav {
               width: 1200px;
               margin: 0 auto;
           }

           .wraper ul li {
               height: 40px;
               line-height: 40px;
               width: 200px;
               background-color: burlywood;
               text-align: center;
               font-weight: bolder;
               border-radius: 20px 20px;
           }

           .wraper ul li:nth-of-type(2) ul {
               display: none;
               /* 不显示 */
           }

           .wraper ul li:hover>a {
               color: darkred;
           }
           /* 鼠标悬浮字体变色 */

           .wraper ul li:nth-of-type(2):hover ul {
               display: block;
               /* 鼠标悬浮显示*/
           }
       </style>

html全部代码内容：