SO - 29820208

by Arun P Johny

HTML

<div id="second-menu" class="collapse navbar-collapse menu_two">
    <ul class="nav navbar-nav inside-nav">
        <li class="sub_menu">	
            <a href="#">Section 1</a>
            <ul class="sidenav_wrapper">
                <li class="sidenav_item sidenavlast">
                    <a href="#">Section 2</a>
                </li>
            </ul>
        </li>
        <li class="sub_menu">
            <a href="#">Section 3</a>
            <ul class="sidenav_wrapper">
                <li class="sidenav_item">
                    <a href="#">Section 4</a>
                </li>
                <li class="sidenav_active">
                    <a href="#">Section 5</a>
                </li>
                <li class="sidenav_item">	
                    <a href="#">Section 6</a>
                </li>
                <li class="sidenav_item sidenavlast">
                    <a href="#">Section 7</a>
                </li>
            </ul>
        </li>
        <li class="sub_menu">
            <a href="#">Section 8</a>
            <ul class="sidenav_wrapper">
                <li class="sidenav_item">
                    <a href="#">Section 9</a>
                </li>
                <li class="sidenav_item">
                    <a href="#">Section 10</a>
                </li>
                <li class="sidenav_item sidenavlast">
                    <a href="#">Section 11</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.menu_two {
    border-left: 16px solid #dfdfdf;
    padding-left: 0;
}
.sidenav_wrapper {
    background: none repeat scroll 0 0 #e7ecf5;
    border-left: 6px solid #8fb8e6;
    display: none;
    padding: 0;
}
.active_sub_menu a {
    font-weight: 700;
}
.active_sub_menu .sidenav_wrapper {
    display: block;
}
.sidenav_active a {
    font-weight: 700;
}

JavaScript

$('ul.navbar-nav li').hover(function () {
    $(this).find('.sidenav_wrapper:first').css('display', 'block');
}, function () {
    $(this).find('.sidenav_wrapper:first').css('display', 'none');
});

$(".sidenav_active").parent().css({
    "display": "block"
});

$('.sidenav_active').closest('.sub_menu').find('a').css({
    "font-weight": "700"
});