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

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

在很多很多页面里都要用到下拉菜单，什么一级菜单，二级菜单，三级菜单，，，，等等，这时俺们就想到了很多很多相关的插件，什么bootstrap啊，什么layui啊。首先，下面bootstrap俺不得不说一下，俺们都知道用插件下拉菜单可以减少代码量，然而bootstrap里刚好就有这个下拉菜单模块，如下：

哈哈，真的是天助俺也。然后俺怀着开心又激动的心情打开了bootstrap找到下拉菜单部分，然后拷贝到俺的项目。说实话使用起来挺方便，直接拷贝即可，但也有缺陷，启动项目后发现下拉菜单点不出来啦。然后俺返回到页面修改代码，再次运行，发现同一级下拉菜单弹出来选项都是一个样的，比如说，如下图，点击业务操作和药房管理查询弹出的下拉选项有冲突。啊，俺到底该怎么办，俺又在药房下一级每一个选项里面嵌套ul和li标签后再次启动项目，然后就挂了，怎么点都没反应。

再次检查发现bootstrap里封装好的这个菜单，不管你怎么嵌套都会不自然，如果二级菜单和三级菜单不在一列或一排显示，那就麻烦啦。首先插件里面的js俺们很难修改。最后俺发现可以利用hover覆盖掉插件的点击显示下拉菜单事件，然后在三级菜单里面加属性定位在右边显示啦。

实现代码如下：我解释一下，下面代码图是业务操作这排及其下拉菜单，最外层li标签包裹着业务操作及xxx等a标签。a标签xxx那层标签也要来个ul，li标签。因为dropdown-menu是插件定义好的类，ul标签里的都会默认隐藏起来。

最后俺要给最外层li标签设置相对定位属性把下面的ul标签显示在右侧，分别设定ul标签left跟top。最后一步设定最外层标签的hover事件显示里面的ul标签就可以啦，bootstrap里的点击事件将失效啦。是不是很完美呀！

上面就是下拉菜单的内容，你还在等什么呢！

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

在很多很多页面里都要用到下拉菜单，什么一级菜单，二级菜单，三级菜单，，，，等等，这时俺们就想到了很多很多相关的插件，什么bootstrap啊，什么layui啊。首先，下面bootstrap俺不得不说一下，俺们都知道用插件下拉菜单可以减少代码量，然而bootstrap里刚好就有这个下拉菜单模块，如下：

哈哈，真的是天助俺也。然后俺怀着开心又激动的心情打开了bootstrap找到下拉菜单部分，然后拷贝到俺的项目。说实话使用起来挺方便，直接拷贝即可，但也有缺陷，启动项目后发现下拉菜单点不出来啦。然后俺返回到页面修改代码，再次运行，发现同一级下拉菜单弹出来选项都是一个样的，比如说，如下图，点击业务操作和药房管理查询弹出的下拉选项有冲突。啊，俺到底该怎么办，俺又在药房下一级每一个选项里面嵌套ul和li标签后再次启动项目，然后就挂了，怎么点都没反应。

再次检查发现bootstrap里封装好的这个菜单，不管你怎么嵌套都会不自然，如果二级菜单和三级菜单不在一列或一排显示，那就麻烦啦。首先插件里面的js俺们很难修改。最后俺发现可以利用hover覆盖掉插件的点击显示下拉菜单事件，然后在三级菜单里面加属性定位在右边显示啦。

实现代码如下：我解释一下，下面代码图是业务操作这排及其下拉菜单，最外层li标签包裹着业务操作及xxx等a标签。a标签xxx那层标签也要来个ul，li标签。因为dropdown-menu是插件定义好的类，ul标签里的都会默认隐藏起来。

最后俺要给最外层li标签设置相对定位属性把下面的ul标签显示在右侧，分别设定ul标签left跟top。最后一步设定最外层标签的hover事件显示里面的ul标签就可以啦，bootstrap里的点击事件将失效啦。是不是很完美呀！

上面就是下拉菜单的内容，你还在等什么呢！