解决导航条中的二级菜单无法显示的问题

本人编程小白,利用假期自学技术。最近在学前端,借csdn这个平台记录一下学习过程中踩过的坑,总结经验。
这两天试着设计一个社团官网主页。
之前曾经单独实战过 实现二级菜单 这个功能,但没想到把以前的代码片段插入进去这个主页的代码里之后,二级菜单的功能没有了。

一、我曾经尝试过的修改方式

去网上一搜,说是css里的层相关的问题,我按照教程把subNav 里的z-index参数设成最大,nav和导航条下面的banner的参数依次设小,但没有效果。

二、最终解决方式

#nav ul li ul{
    flex-direction: column;
    display: none;
}
#nav ul li:hover ul{
    display: flex;
}

最终在css代码中添加了这两行,先将ul ->li->ul隐藏,然后给ul->li设置hover属性,让ul显示出来。

三、总结

我觉得设定z-index 参数应该是用于解决二级菜单显示不全(被遮挡)的问题,而我的网页的问题其实是:整个二级菜单都没有出现,所以用第二种方法才能解决。


版权声明:本文为julia_xueli原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。