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

最新推荐文章于 2022-06-18 16:37:27 发布

_春之Dade

最新推荐文章于 2022-06-18 16:37:27 发布

阅读量434

点赞数

<!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>

_春之Dade

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 水平导航鼠标移动下拉，点击下拉。

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>球球ti
复制链接

扫一扫