Bootstrap导航条鼠标悬停下拉菜单

(编辑：jimmy 日期: 2025/9/28 浏览：2)

Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标hover时就弹出二级菜单。

效果图：

CSS修改：

<style type="text/css"> 
 .navbar .nav > li .dropdown-menu { 
 margin: 0; 
 } 
 .navbar .nav > li:hover .dropdown-menu { 
 display: block; 
 } 
</style>

实例源码：

<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Bootstrap导航条鼠标悬停下拉菜单</title> 
 <link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> 
 <script id="jquery_172" type="text/javascript" class="library" src="/UploadFiles/2021-04-02/jquery.min.js">

 Find it more from：http://runjs.cn/detail/k4ahmcgc
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

下一篇：通过修改360抢票的刷新频率和突破8车次限制实现方法