bootstrap3级下拉菜单 及 CSS实现三级下拉菜单分析

时间：2024-03-11 08:52:18
<!DOCTYPE HTML>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>Bootstrap 3 的多级下拉菜单示例</title>  
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
    <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/>  
    <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>  
    <style type="text/css">  
        .dropdown-submenu {  
            position: relative;  
        }  
        .dropdown-submenu > .dropdown-menu {  
            top: 0;  
            left: 100%;  
            margin-top: -6px;  
            margin-left: -1px;  
            -webkit-border-radius: 0 6px 6px 6px;  
            -moz-border-radius: 0 6px 6px;  
            border-radius: 0 6px 6px 6px;  
        }  
        .dropdown-submenu:hover > .dropdown-menu {  
            display: block;  
        }  
        .dropdown-submenu > a:after {  
            display: block;  
            content: " ";  
            float: right;  
            width: 0;  
            height: 0;  
            border-color: transparent;  
            border-style: solid;  
            border-width: 5px 0 5px 5px;  
            border-left-color: #ccc;  
            margin-top: 5px;  
            margin-right: -10px;  
        }  
        .dropdown-submenu:hover > a:after {  
            border-left-color: #fff;  
        }  
        .dropdown-submenu.pull-left {  
            float: none;  
        }  
        .dropdown-submenu.pull-left > .dropdown-menu {  
            left: -100%;  
            margin-left: 10px;  
            -webkit-border-radius: 6px 0 6px 6px;  
            -moz-border-radius: 6px 0 6px 6px;  
            border-radius: 6px 0 6px 6px;  
        }  
    </style>  
</head>  
<body>  
<div class="container">  
    <div class="row">  
        <h2>Bootstrap 3多级下拉菜单</h2>  
        <hr>  
        <div class="dropdown">  
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#"  
               href="javascript:;">  
                下拉多级菜单 <span class="caret"></span>  
            </a>  
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">  
                <li><a href="javascript:;">一级菜单</a></li>  
                <li><a href="javascript:;">一级菜单</a></li>  
                <li class="divider"></li>  
                <li class="dropdown-submenu">  
                    <a tabindex="-1" href="javascript:;">一级菜单</a>  
                    <ul class="dropdown-menu">  
                        <li><a tabindex="-1" href="javascript:;">二级菜单</a></li>  
                        <li class="divider"></li>  
                        <li class="dropdown-submenu">  
                            <a href="javascript:;">二级菜单</a>  
                            <ul class="dropdown-menu">  
                                <li><a href="javascript:;">三级菜单</a></li>  
                            </ul>  
                        </li>  
                    </ul>  
                </li>  
            </ul>  
        </div>  
    </div>  
</div>  
</body>  
</html>

　　原文链接

 

CSS实现三级下拉菜单分析

相关文章