bootstrap 水平导航鼠标移动下拉，点击下拉。

来源：互联网发布：linux c编程实战 pdf 编辑：程序博客网时间：2024/06/07 05:03
<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>球球</title>    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    <style TYPE="text/css">        /*导航*/        .nav-tabs > li > a:hover {            /*border-color: #eee #eee #ddd;*/            border: 0px;        }        .nav-tabs > li.active > a,        .nav-tabs > li.active > a:hover,        .nav-tabs > li.active > a:focus {            color: white;            cursor: default;            background-color: #000609;            border: 0px ;            border-bottom-color: transparent;        }        .nav > li {            position: relative;            display: block;        }        .nav > li > a {            position: relative;            display: block;            padding: 10px 15px;        }        .nav > li > a:hover,        .nav > li > a:focus {            text-decoration: none;            background-color: red;        }        /*导航*/        /*鼠标悬停*/        .dropbtn {            position: relative;            display: block;            padding: 10px 15px;           /* width: 80px;*/        }        .dropdown {            position: relative;            display: inline-block;        }        .dropdown-content {            display: none;            position: absolute;            background-color: red;            min-width: 80px;            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);        }        .dropdown-content a {            color: black;            padding: 10px 15px;            text-decoration: none;            display: block;            background-color: aqua;        }        .dropdown-content a:hover {background-color: #f1f1f1}        .dropdown:hover .dropdown-content {            display: block;        }        .dropdown:hover .dropbtn {            background-color: red;        }        /*鼠标悬停*/        /*下拉菜单*/        .dropdown-menu li a{            min-width: 80px;          /*  padding:0px;*/        }        .cc:hover,        .cc:focus,        .cc.focus {            color: red;        }        .dropdown-menu {            min-width: 160px;        }        /*下拉菜单*/    </style></head><body><div class="container"> <div class="row" style="background-color: #000609;color: white">     <ul class="nav nav-tabs">         <li role="presentation" class="active"><a href="#">Home</a></li>         <li role="presentation"><a href="#">Profile</a></li>         <li role="presentation">             <div class="dropdown">                 <a class="dropbtn">下拉菜单</a>                 <div class="dropdown-content" style="            z-index: 99;">                     <a href="http://www.runoob.com">菜鸟教程</a>                     <a href="http://www.runoob.com">菜鸟教程</a>                     <a href="http://www.runoob.com">菜鸟教程</a>                 </div>             </div>         </li>         <li role="presentation">            <div class="btn-group">             <button type="button" class="btn cc dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  style="padding: 10px 15px;background-color: #000609;border: 0px;">                 Action <span class="caret"></span>             </button>             <ul class="dropdown-menu" style="background-color: red">                 <li><a href="#">Action</a></li>                 <li><a href="#">Another action</a></li>                 <li><a href="#">Something</a></li>                 <li role="separator" class="divider"></li>                 <li><a href="#">Separated link</a></li>             </ul>             </div>         </li>         <li role="presentation"><a href="#">Messages</a></li>     </ul></div>    <!--<div class="row" style="margin-top: 80px;">    <ul class="nav nav-pills nav-stacked" style="width: 120px;">        <li role="presentation" class="active"><a href="#">Home</a></li>        <li role="presentation">                <div class="dropdown">                  <a class="dropbtn">下拉菜单</a>                <div class="dropdown-content" style="            z-index: 99;">                    <a href="http://www.runoob.com">菜鸟教程 1</a>                    <a href="http://www.runoob.com">菜鸟教程 2</a>                    <a href="http://www.runoob.com">菜鸟教程 3</a>                </div>            </div>        </li>        <li role="presentation"><a href="#">Messages</a></li>    </ul>    </div>--></div></body></html>
0 0
bootstrap 水平导航 鼠标移动下拉，点击下拉。

bootstrap 水平导航鼠标移动下拉，点击下拉。
