bootstrap 二级下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
bootstrap 二级下拉菜单
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head><title>Bootstrap 實例 - 基本的按鈕下拉菜單</title><link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script 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="btn-group"><button type="button" class="btn btn-default">原始</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"><li><a href="#">另一個功能</a></li><li><a href="#">其他</a></li><li class="divider"></li><li class="dropdown-submenu"><a href="#">More options </a><ul class="dropdown-menu"><li><a href="#">另一個功能1</a></li></ul> </li></ul>
</div></body>
</html>
總結(jié)
以上是生活随笔為你收集整理的bootstrap 二级下拉菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《RRU-Net: The Ringed
- 下一篇： 第一周学习报告（关于string)