Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创
最近公司做网页用到Bootstrap的菜单功能，要实现鼠标悬停显示二级菜单，于是就研究了一下，大概有两种方法。
第一种方法：修改样式表
实际上比较简单，只需要加一个css设置下hover的状态，把下拉菜单设置成block，具体css：
.nav > li:hover .dropdown-menu {display: block;}
这句css加在bootstrap.min.css之后出现的css中，你试下！
缺点：
1.相应的顶级菜单不可点击
2.鼠标滑到二级菜单后，顶级菜单没有样式
第二种方法：利用JQuery的特性来实现
结合了网上的教程，利用JQuery中的两个事件就可以解决问题，具体css：
//关闭click.bs.dropdown.data-api事件，使顶级菜单可点击
$(document).off('click.bs.dropdown.data-api');
//自动展开
$('.nav .dropdown').mouseenter(function(){
$(this).addClass('open');
});
//自动关闭
$('.nav .dropdown').mouseleave(function(){
$(this).removeClass('open');
});
这种方法不仅顶级菜单可以点击，而且样式也不会丢，而且能解决Bootstrap鼠标悬停的问题，推荐大家使用。
-
问题内容： 好的，所以我需要的很简单。 我已经在导航栏中设置了一些下拉菜单（使用），并且工作正常。 问题是它可以工作“ ”，而我希望它可以工作“ ”。 有内置的方法吗？ 问题答案： 最简单的解决方案是使用CSS。添加类似…
-
问题内容： 我试图做一个简单的CSS下拉菜单。当您将鼠标悬停在链接上时，我无法实现下拉子菜单。以下是我的HTML和CSS规则，谢谢。 问题答案： 尝试这个： 问题是您的菜单ul是可见的（始终），但是由于this规则的选择器，所以li里面的li是（始终）不可见。 请记住，visible：hidden隐藏元素，但仍在DOM中占用空间，而display：none隐藏元素并将其从页面元素流中移除 另外，您
-
问题内容： 我想让我的Bootstrap菜单在悬停时自动下拉，而不是必须单击菜单标题。我也想丢掉菜单标题旁边的小箭头。 问题答案： 我基于最新的（v2.0.2）Bootstrap框架创建了一个纯悬停下拉菜单，该框架具有对多个子菜单的支持，并认为我会将其发布给以后的用户：
-
我自己处理悬停事件来添加一个三角形指针和一个水平对齐的子菜单栏。当单击顶部菜单时，它可以很好地显示和导航到子菜单。问题是在悬停期间，试图将鼠标移动到子菜单时，子菜单栏会消失。 TIA 代码： null null
-
主要内容：用法,实例,实例,选项,方法,实例Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。 如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的
-
主要内容：实例,选项,实例,实例,更多实例本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。 如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单： 实例 <div class="dropdown"> <button type="button" c