本人编程小白,利用假期自学技术。最近在学前端,借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 参数应该是用于解决二级菜单显示不全(被遮挡)的问题,而我的网页的问题其实是:整个二级菜单都没有出现,所以用第二种方法才能解决。