Skip to content

Instantly share code, notes, and snippets.

@oneblackcrayon

oneblackcrayon/bootstrap3-submenu.html

Forked from Moligaloo/bootstrap3-submenu.html
Created November 17, 2015 04:20
Show Gist options
  • Save oneblackcrayon/27ff10da0872eb2854f9 to your computer and use it in GitHub Desktop.
Save oneblackcrayon/27ff10da0872eb2854f9 to your computer and use it in GitHub Desktop.
Download ZIP
Add missing cascading menu to Bootstrap 3, original answer came from: http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing
Raw
bootstrap3-submenu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Moligaloo">
<title> Submenu example </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<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 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:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
border-left-color:#ffffff;
}
.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>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" >
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a href="#">More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment