三行代码教废你bootstrap原生下拉菜单实现非点击显示

本文主要是介绍三行代码教废你bootstrap原生下拉菜单实现非点击显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

bootstrap 3原生的下拉菜单（DropDown）组件默认不支持鼠标移上去就展开下拉列表,只能点击后才显示.

为了解决这个问题,我在网上无意发现了一个插件bootstrap-dropdown-hover,但是用起来很繁琐.感兴趣的朋友可以自行搜索一下.

相比较插件来说 这三行代码用起来更香:

.dropdown:hover .dropdown-menu {display: block;
}

html代码:

<li class="nav-item ml-2 btn-group-vertical dropdown" id="underline"><a class="nav-link" data-toggle="dropdown" href="#"><i class="ti-hand-point-down"></i> 与我相关</a><ul class="dropdown-menu"><li><a class="nav-link text-center" th:href="@{/contact}">🔥 与我联系</a></li><li><a class="nav-link text-center" th:href="@{/about}"><i class="ti-crown"></i> 关于作者</a></li></ul></li>

应用效果:

这篇关于三行代码教废你bootstrap原生下拉菜单实现非点击显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---