JSFiddle - React, Tailwind, and code Playground

by Gretchen Ward

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<header class="clearfix">
  <button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float: left;">
    <span class="sr-only">Toggle Button</span>
    MENU
  </button>
<nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch navbar-offcanvas-fade" role="navigation" id="js-bootstrap-offcanvas">
  <div class="container-fluid">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float: left;">
            <span class="sr-only">Toggle Navigation</span>
            <i class="glyphicon glyphicon-remove"></i>
            
          </button>
          <a class="navbar-brand" id="logo" href="http://www.asla.org"><img src="images/Logo.png"></a>
      </div>
      <div id="nav-container">
        <ul class="nav navbar-nav" id="dropdown">
          <li class="dropdown cases studies">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" id="main-nav">Case Studies</a>
    		      <ul class="dropdown-menu multi-level cases-body studies-drop cols" role="menu">
                <li class="dropdown-submenu">
                  <a href="#">U.S. Mid-Atlantic</a>
                    <ul class="dropdown-menu" role="menu">
                      <li class="category-cases"><a href="sidwell.html">Sidwell Friends School</a></li>
                    </ul>
                </li>
                <li class="dropdown-submenu">
                  <a href="#">U.S. Northeast</a>
                    <ul class="dropdown-menu" role="menu">
                 ...

CSS

.navbar-default {
	background:#00AEEF;
	margin:0 0 0 0px;
	padding:0;
	height:100px;
	width:960px;
	max-width: 100%;
	border-radius: 0px;
	border: none;
}

#nav-container {
background:none;
width: 720px;
float:left;
max-width: 100%;
padding-top: 25px;
}

#nav-container ul.dropdown-menu {
	padding:0px 15px 25px 15px;
	margin:0 15px 0 10px;
	position:absolute;
	background: #00Aeef;
	border:none;
	list-style:none;
	z-index:100;
	border-radius: 0px;
	width: 175px;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
	background-color: #00AEEF;
}

.dropdown-submenu {
	position:relative;
}

.dropdown-submenu a {
 	color: #fff !important;
 }

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: #00AEEF;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
	background-color: #00AEEF;
}

.dropdown-submenu .dropdown-menu {
	top:0;
	left:100%;
	margin-top:-6px;
	border-top-left-radius:0
	}

.dropup .dropdown-submenu .dropdown-menu,.navbar-fixed-bottom .dropdown-submenu .dropdown-menu {
	top:auto;
	bottom:0;
	margin-top:0;
	margin-bottom:-6px;
	border-top-left-radius:4px;
	border-bottom-left-radius:0;
	}

.dropdown-menu-right .dropdown-submenu .dropdown-menu {
	left:auto;
	right:100%;
	border-top-left-radius:4px;
	border-top-right-radius:0;
	}

.dropup .dropdown-menu-right .dropdown-submenu .dropdown-menu,.navbar-fixed-bottom .dropdown-menu-right .dropdown-submenu .dropdown-menu {
	border-radius:4px 4px 0;
	}

.dropdown-submenu > a:after {
	margin-top:6px;
	border-left:4px dashed;
	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
	}

.dropdown-menu-right .dropdown-submenu > a:after {
	float:left;
	border-left:none;
	margin-left:-10px;
	margin-right:0;
	border-right:4px dashed;
	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
	}

}

#nav-container ul.dropdown-menu a#cases {
list-style:none;
font-family:Arial, Helvetica,...

JavaScript

/*!
 * Bootstrap-submenu v1.2.11 (http://vsn4ik.github.io/bootstrap-submenu)
 * Copyright 2015 Vasily A. (https://github.com/vsn4ik)
 * Licensed under MIT (https://github.com/vsn4ik/bootstrap-submenu/blob/master/LICENSE)
 */

//Submenu Bootstap Plugin

"use strict";!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function b(b){this.$element=a(b),this.$main=this.$element.closest(".dropdown, .dropup, .btn-group"),this.$menu=this.$element.parent(),this.$drop=this.$menu.parent().parent(),this.$menus=this.$menu.siblings(".dropdown-submenu");var d=this.$menu.find("> .dropdown-menu > "+c);this.$submenus=d.filter(".dropdown-submenu"),this.$items=d.not(".dropdown-submenu"),this.init()}var c=":not(.disabled, .divider, .dropdown-header)";return b.prototype={init:function(){this.$element.on("click.bs.dropdown",this.click.bind(this)),this.$element.keydown(this.keydown.bind(this)),this.$menu.on("hide.bs.submenu",this.hide.bind(this)),this.$items.keydown(this.item_keydown.bind(this)),this.$menu.nextAll(c+":first:not(.dropdown-submenu)").children("a").keydown(this.next_keydown.bind(this))},click:function(a){a.stopPropagation(),this.toggle()},toggle:function(){this.$menu.hasClass("open")?this.close():(this.$menu.addClass("open"),this.$menus.trigger("hide.bs.submenu"))},hide:function(a){a.stopPropagation(),this.close()},close:function(){this.$menu.removeClass("open"),this.$submenus.trigger("hide.bs.submenu")},keydown:function(a){if(/^(32|38|40)$/.test(a.keyCode)&&a.preventDefault(),/^(13|32)$/.test(a.keyCode))this.toggle();else if(/^(27|38|40)$/.test(a.keyCode))if(a.stopPropagation(),27==a.keyCode)this.$menu.hasClass("open")?this.close():(this.$menus.trigger("hide.bs.submenu"),this.$drop.removeClass("open").children("a").focus());else{var b=this.$main.find("li:not(.disabled):visible >...