本文用于总结自己在实现将bootstrap的下拉菜单修改成鼠标悬停下拉菜单显示的过程。
下面是详细代码：
<!DOCTYPE html>运行结果如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap导航条鼠标悬停下拉菜单</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.navbar .nav > li .dropdown-menu {
margin: 0;
}
.navbar .nav > li:hover .dropdown-menu {
display: block;
}
.title{
height: 30px;
width: 100px;
background-color: rgba(45, 182, 224, 0.09) !important;
border-radius: 0 !important;
line-height: 10px;
color: black !important;
border-style:solid;
border-width:1px;
border-color: rgba(20, 248, 249, 0.15)
}
.dropdown-menu{
border-radius: 0;
}
a:hover{
background-color: rgba(45, 182, 224, 0.09) !important;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="dropdown"><a href="#" class="title">每页显示<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">10</a></li>
<li><a href="#">20</a></li>
<li><a href="#">50</a></li>
<li><a href="#">100</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</div>
</body>
</html>
