Bootstrip 多级下拉菜单示例

最新推荐文章于 2022-08-18 21:39:46 发布

ssxbxk

最新推荐文章于 2022-08-18 21:39:46 发布

阅读量409

点赞数

分类专栏： HTML 文章标签： bootstrip dropdown-nemu dropdown-submenu

本文链接：https://blog.csdn.net/ssxbxk/article/details/82752379

版权

HTML 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

注意样式中的内容要自己添加的, 不是bootstrip的一部分, 否则dropdown-submenu 的内容无法显示的

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>Bootstrap 实例 - 下拉菜单</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		.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">
  <h2>下拉菜单</h2>
  <p>.dropdown 菜单用于指定下拉菜单，下拉菜单都包裹在 .dropdown 里。</p>
  <p>.dropdown-menu 类用于实际下拉菜单的创建。</p>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">教程
    <span class="caret"></span></button>
    <ul class="dropdown-menu" id="ddmSSDW">
	<li class="dropdown-submenu">
		<a tabindex="-1" href="#">管理局</a>
		<ul class="dropdown-menu">
			<li>
				<a tabindex="-1" href="#">局领导</a>
			</li>
			<li class="dropdown-submenu">
				<a tabindex="-1" href="#">局机关</a>
				<ul class="dropdown-menu">
					<li><a tabindex="-1" href="#">局办公室</a></li>
					<li><a tabindex="-1" href="#">发展规划处</a></li>
					<li><a tabindex="-1" href="#">财务处</a></li>
					<li><a tabindex="-1" href="#">人事教育处</a></li>
					<li><a tabindex="-1" href="#">通航安全处</a></li>
					<li><a tabindex="-1" href="#">设备技术处</a></li>
					<li><a tabindex="-1" href="#">党委办公室</a></li>
					<li><a tabindex="-1" href="#">纪检监察室</a></li>
					<li><a tabindex="-1" href="#">工会办公室</a></li>
				</ul>
			</li>
			<li class="dropdown-submenu">
				<a tabindex="-1" href="#">直属单位</a>
				<ul class="dropdown-menu">
					<li class="dropdown-submenu">
						<a tabindex="-1" href="#">通信信息中心</a>
						<ul class="dropdown-menu">
							<li><a tabindex="-1" href="#">监管系统部</a></li>
							<li><a tabindex="-1" href="#">中心领导</a></li>
							<li><a tabindex="-1" href="#">综合办</a></li>
							<li><a tabindex="-1" href="#">技术办</a></li>
							<li><a tabindex="-1" href="#">运维办</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
  </div>
</div>

</body>
</html>

ssxbxk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrip 多级下拉菜单示例

注意样式中的内容要自己添加的, 不是bootstrip的一部分, 否则dropdown-submenu 的内容无法显示的 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Bootstrap 实例 - 下拉菜单&lt;/title&gt; &a
复制链接

扫一扫

专栏目录