Create dropdown with sub menu item
Description
The following code shows how to create dropdown with sub menu item.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://getbootstrap.com/dist/css/bootstrap.css">
<style type='text/css'>
#parentMenu {<!-- w ww . ja va 2s. com-->
display: block;
top: 0;
}
/* Helps position submenu */
.dropdown-submenu {
position: relative;
}
/* Menus under the submenu should show up on the right of the parent */
.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;
}
/* Make submenu visible when hovering on link */
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
/* Add carot to submenu links */
.dropdown-submenu>a:after {
display: block;
float: right;
/*simple */
content: "?";
color: #cccccc;
/* looks a little better */
content: " ";
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;
}
/* Change carot color on hover */
.dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
</style>
</head>
<body>
<!-- Parent Menu -->
<ul class="dropdown-menu" id="parentMenu" 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>
<!-- Child Menu -->
<li class="dropdown-submenu"><a tabindex="-1" href="#">More
options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<!-- Grandchild Menu -->
<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>
<!-- Post Info -->
<div
style='position: fixed; bottom: 0; left: 0; background: lightgray; width: 100%;'>
About this SO Question: <a
href='http://stackoverflow.com/q/24414485/1366033'>Dropdown-submenu</a><br />
Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap
3.0 Skeleton</a><br />
<div>
</body>
</html>