bootstrap实现鼠标悬停下拉菜单

来源：互联网发布：js数组取最后一个编辑：程序博客网时间：2024/06/05 04:33

本文用于总结自己在实现将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>

运行结果如下：

阅读全文

1 0