bootsrap 导航鼠标悬定下拉列表

最新推荐文章于 2022-01-21 15:36:05 发布

_春之Dade

最新推荐文章于 2022-01-21 15:36:05 发布

阅读量489

点赞数

<!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">
        .navbar .nav > li .dropdown-menu {
            margin: 0;
        }
        .navbar .nav > li{
          float: left;
        }
        .navbar .nav > li:hover .dropdown-menu {
            display: block;
        }
    </style>
</head>
<body>

        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li><a href="#">Menu1</a></li>
                    <li><a href="#">Menu2</a></li>
                    <li class="dropdown"> <a href="#menu3">Menu3</a>
                        <ul class="dropdown-menu">
                            <li><a href="#menu7">Menu7</a></li>
                            <li><a href="#menu8">Menu8</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu4</a></li>
                    <li><a href="#">Menu5</a></li>
                    <li><a href="#">Menu6</a></li>
                </ul>
            </div>
        </div>

</body>
</html>

</body>
</html>

_春之Dade

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootsrap 导航鼠标悬定下拉列表

Bootstrap导航条鼠标悬停下拉菜单.navbar .nav > li .dropdown-menu {margin: 0;}.navbar .nav > li:hover .dropdown-menu {display: block;}Bootstrap导航条鼠标悬停下拉菜单Bootstrap的导航条下拉菜单为了
复制链接

扫一扫