JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css"></script>
<div class="jumbotron">
        <div class="container-fluid">

            <!-- Grid demo navbar -->
            <div class="navbar navbar-default yamm">
                <div class="navbar-header">
                    <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid"
                            class="navbar-toggle">
                        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                        </span>
                    </button>
                    <a href="#" class="navbar-brand">buy100</a>
                </div>
                <div id="navbar-collapse-grid" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav" >
                        <li class="dropdown yamm-fw">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">main menu<b class="caret"></b></a>
                            <ul class=" navbar-nav dropdown-menu" >
                                <!-- Grid 12 Menu -->
                                <li class="dropdown yamm-fw">
                                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">menu1<b class="caret"></b></a>
                                    <ul class="dropdown-menu" >
                                        <li class="grid-demo">
                                            <div class="row">
                                                                                                <div class="col-sm-3 ">
                                                    <h4 class="">
                                   ...

CSS

body {
  padding-bottom: 40px;
  color: #666;
}
pre { margin: 0; padding: 10px 20px !important;}

footer {
  margin-top: 200px;
}

.container, .jumbotron .container { width: auto; max-width: 1170px; }

.jumbotron {
  margin: 60px 0;
  padding-left: 0;
  padding-right: 0;
}
  .jumbotron.intro {
    margin-top: 0;
  }

  .jumbotron .navbar {
    font-size: 14px;
    line-height: 1.6;
  }

/* menu styes */
.list-unstyled,
.list-unstyled ul { min-width: 120px }

@media ( min-width: 767px ) {
  .panel-group { width: 400px; }
  .thumbnail { margin: 0; }
}

/* Grid demo styles */
.grid-demo {
  padding: 10px 30px;
}

  .grid-demo [class*="col-"] {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1em;
    text-align: center;
    line-height: 2;
    background-color: #e5e1ea;
    border: 1px solid #d1d1d1;
  }


ul.dropdown-menu{
    right: 77px !important; 
    left: 77px !important; 

}
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
}
.yamm .yamm-content {
  padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}

.active{
  
    color:#DC0000 !important;
}

JavaScript

!function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (!d.getElementById(id)) {
                js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");

        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
            // Avoid following the href location when clicking
            event.preventDefault();
            // Avoid having the menu to close when clicking
            event.stopPropagation();
            // If a menu is already open we close it
           $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
            // opening the one you clicked on
            $(this).parent().addClass('open');

            var menu = $(this).parent().find("ul");
            var menupos = menu.offset();

            if ((menupos.left + menu.width()) + 30 > $(window).width()) {
                var newpos = -menu.width();
            } else {
                var newpos = $(this).parent().width();
            }
            menu.css({ left: newpos });
       });

$('li a').click(function () {
    // reset all 
    $('ul.nav a').removeClass('active');
    
    $(this).addClass('active');
    $(this).parents('li').find('a.dropdown-toggle').filter(function () {
        return !$(this).closest('ul').hasClass('dropdown-menu');
    }).addClass('active');    
});