关于css:三行代码教废你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>

利用成果:

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理