JSFiddle - React, Tailwind, and code Playground

by maxisam

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id="ctl00_ctl00_MenuTop" class="AspNet-Menu-Horizontal">
        <ul class="AspNet-Menu">
            <li class="AspNet-Menu-WithChildren  AspNet-Menu-ChildSelected">
                <a class="AspNet-Menu-Link  AspNet-Menu-ChildSelected" href="/home.aspx">
                    Home</a>
                <ul>
                    <li class="AspNet-Menu-Leaf  AspNet-Menu-Selected">
                        <a class="AspNet-Menu-Link  AspNet-Menu-Selected" href="/Modules/Home/PatientCenteredCare.aspx">
                            Patient-Centered Care</a>
                    </li>
                    <li class="AspNet-Menu-Leaf">
                        <a class="AspNet-Menu-Link" href="/Modules/Home/Communicaton.aspx">
                            Communicaton</a>
                    </li>
                    <li class="AspNet-Menu-Leaf">
                        <a class="AspNet-Menu-Link" href="/Modules/Home/QualitySafety.aspx">
                            Quality and Safety</a>
                    </li>
                    <li class="AspNet-Menu-Leaf">
                        <a class="AspNet-Menu-Link" href="/Modules/Home/Ethics.aspx">
                            Ethics</a>
                    </li>
                    <li class="AspNet-Menu-Leaf">
                        <a class="AspNet-Menu-Link" href="/Modules/Home/Knowledge.aspx">
                            Knowledge</a>
                    </li>
                    <li class="AspNet-Menu-Leaf">
                        <a class="AspNet-Menu-Link" href="/Modules/Home/ProblemSolving.aspx">
                            Problem Solving</a>
                    </li>
                    <li class="AspNet-Menu-Leaf">
                        <a class="AspNet-Menu-Link" href="/Modules/Home/LifelongLearning.aspx">
                            Lifelong Learning</a>
                    </li>
                    <li...

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

$('div.AspNet-Menu-Horizontal').addClass('navbar').children('ul.AspNet-Menu').addClass('nav').wrap('<div class="navbar-inner">');
$('li.AspNet-Menu-WithChildren').addClass('dropdown').children('a.AspNet-Menu-Link').addClass('dropdown-toggle').attr('data-toggle','dropdown').append('<b class="caret"></b>').next('ul').addClass('dropdown-menu');