hover配合bootStrap完美实现多级下拉菜单

最新推荐文章于 2024-08-13 08:14:02 发布

雷霆嘎巴！

最新推荐文章于 2024-08-13 08:14:02 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_44485559/article/details/93971796

版权

在网页设计中，经常需要实现多级下拉菜单。Bootstrap提供了下拉菜单功能，但存在一些问题，如点击后无法正常显示、各级菜单冲突等。通过覆盖Bootstrap的点击事件，改用hover来触发下拉菜单，并通过CSS定位解决菜单排列问题，可以实现更理想的多级下拉菜单效果。具体实现包括在最外层li标签上设置相对定位，并在hover事件中显示内层ul标签。

摘要由CSDN通过智能技术生成

在很多很多页面里都要用到下拉菜单，什么一级菜单，二级菜单，三级菜单，，，，等等，这时俺们就想到了很多很多相关的插件，什么bootstrap啊，什么layui啊。首先，下面bootstrap俺不得不说一下，俺们都知道用插件下拉菜单可以减少代码量，然而bootstrap里刚好就有这个下拉菜单模块，如下：
在这里插入图片描述
哈哈，真的是天助俺也。然后俺怀着开心又激动的心情打开了bootstrap找到下拉菜单部分，然后拷贝到俺的项目。说实话使用起来挺方便，直接拷贝即可，但也有缺陷，启动项目后发现下拉菜单点不出来啦。然后俺返回到页面修改代码，再次运行，发现同一级下拉菜单弹出来选项都是一个样的，比如说，如下图，点击业务操作和药房管理查询弹出的下拉选项有冲突。啊，俺到底该怎么办，俺又在药房下一级每一个选项里面嵌套ul和li标签后再次启动项目，然后就挂了，怎么点都没反应。