JSFiddle - React, Tailwind, and code Playground

by mark47

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container-fluid">
        <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a href="#" class="brand">Project name</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle active" href="#">Go To <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="dropdown submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                    <ul class="dropdown-menu submenu-show submenu-hide">
                        <li class="dropdown submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.1</a>
                             <ul class="dropdown-menu submenu-show submenu-hide">
                                    <li><a href="#">Level 1.1.1</a></li>
                                    <li><a href="#">Level 1.1.2</a></li>
                                    <li><a href="#">Level 1.1.3</a></li>
                                    <li><a href="#">Level 1.1.4</a></li>
                            </ul>
                        </li>
                        <li class="dropdown submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.2</a>
                            <ul class="dropdown-menu submenu-show submenu-hide">
                                    <li><a href="#">Level 1.2.1</a></li>
                                    <li><a href="#">Level 1.2.2</a></li>
                            </ul>
                        </li>
                        <li><a...

CSS

.submenu-show
{
    border-radius: 3px;
    display: block;
    left: 100%;
    margin-top: -25px !important;
    moz-border-radius: 3px;
    position: absolute;
    webkit-border-radius: 3px;
}
.submenu-hide
{
    display: none !important;
    float: right;
    position: relative;
    top: auto;
}
.navbar .submenu-show: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 .submenu-show:after
{
    border-bottom: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-top: 6px solid transparent;
    left: 10px;
    left: -6px;
    top: 11px;
}

JavaScript

jQuery('.submenu').hover(function() {
    jQuery(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
}, function() {
    jQuery(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
}).find("a:first").append(" &raquo; ");