在网页制作中我们经常会用到的这样的导航栏+二级菜单布局 实现效果如下： 设计思路就是通过 ul li 的双重嵌套来实现二级菜单，l利用display:none将二级菜单默认隐藏，li:hover鼠标悬浮时再将其显示出来。 需要注意的是： 1.需要清除掉网页的原始属性 以防止二级菜单错位*{margin:0;padding:0;} 2.在一级菜单中使用display: block; float:left 使其横向显示 3.使用绝对对位 然后使二级菜单默认隐藏position:absolute;display:none; 4.使用display: block;将二级菜单显示为独占一行 5.在二级菜单中需要将浮动清除float:none 6.设置二级菜单的宽度与一级同宽 使其显示正常

实现非常简单 具体代码如下： 1.HTML部分

这里将导航栏部分整体放置在一个flexbox中，以便于后期其他部分的编辑。用div做二级菜单的容器便于调整。

2.CSS部分

代码块中没有写注释，可以在评论区中讨论！祝大家五一快乐！

噢！这里为了勋章不得不废话了。。。。。。。。。。。。。。。。。 国际劳动节又称“五一国际劳动节”、“国际示威游行日”，它是世界上80多个国家的全国性节日。这一天，对于面对整日面对键盘的程序员或软件从业者，又到了春暖花开，技术骚客们又开始纷纷走出家门，开始享受美好的春光。希望搞技术的人群们，无论是那类技术都能充实的度过新的一年。 最后保佑大家都能跑路成功，不被老板追杀，阿弥陀佛！ 在那些我们看到、看不到的角落，劳动者们用自己的双手诠释着生活的奥义，用自己的方式创造着人生的美好。他们可能是艺术家、运动员，也可能是快递员、环卫工…他们以任何形式付出的辛苦，都值得肯定和尊重；向劳动者致以深切的问候——感谢你们，您辛苦了！ 广厦千万间，凝聚着每一个建筑者的心血；粮食大米和蔬菜，源于农民的辛劳和汗水；几只粉笔，三尺讲台，教师为国家输送了一代又一代的人才；救死扶伤，治病救人，医生温暖了一个又一个的家庭。是他们，给我们带来了一个更美好的世界。他们是默默无闻的奉献者，是这个时代最美丽的人！ 今天，是五一劳动节，是这群最可爱的人最盛大的节日！让我们怀着感恩的心，真挚地对这群伟大的劳动者说声：劳动节快乐！ 因为有你们负重前行，才有了我们的岁月静好；因为有你们的辛勤付出，才成就了我们的安暖时光。 在此，致敬所有平凡生活中不平凡的人们，是你，是我，也是他！感谢生命中的无畏的坚守，感谢生活中的无私的奉献，致敬每一个努力生活的我们！