JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="menu-system">
<li class="active">
<a href="#">Location</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle menu-item" data-toggle="dropdown"> Top level Option 1</a>
<ul class="dropdown-menu">
<li><a href="#opt1"> Option 1</a></li>
<li><a href="#opt2"> Option 2</a></li>
<li><a href="#opt3"> Option 3</a></li>
<li><a href="#opt4"> Option 4</a></li>
</ul>
</li>
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
JavaScript
$('.dropdown-menu li a').each(function() {
if($(location).attr('href').indexOf($(this).attr('href')) > 0) {
$('.dropdown-menu').show();
}
});