submenus with hover

Bootstrap3 submenus with hover

by Stefan Gruenwald

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
				<span class="sr-only">Enable Navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
	<div class="collapse navbar-collapse navbar-ex1-collapse">
		<ul class="nav navbar-nav">
			<li class="menu-item dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down</a>
				<ul class="dropdown-menu">
					<li class="menu-item dropdown dropdown-submenu">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
						<ul class="dropdown-menu">
							<li class="menu-item ">
								<a href="#">Link 1</a>
							</li>
							<li class="menu-item dropdown dropdown-submenu">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">Link 3</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>

CSS

.dropdown {
			position:relative;
		}
.dropdown>.dropdown-menu {
			top:0;
			left:100%;
			margin-top:30%;
			margin-left:-30%;
			-webkit-border-radius:0 6px 6px 6px;
			-moz-border-radius:0 6px 6px 6px;
			border-radius:0 6px 6px 6px;
		}
.dropdown:hover>.dropdown-menu {
			display:block;
		}
.dropdown>a:after {
			display:block;
			content:" ";
			float:right;
			width:10;
			height:10;
			border-color:transparent;
			border-style:solid;
			border-width: 5px 0 5px 5px;
			border-left-color:#cccccc;
            margin-top: 5px;
			margin-left:10px;
		}
.dropdown:hover>a:after {
			border-left-color:#ffffff;
		}
.dropdown.pull-left {
			float:none;
		}
.dropdown.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;
		}	

.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;
		}