JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
   <ul class="nav nav-pills">

            <li><a href="#">Dashboard</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Missions <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="<?php echo site_url('filecontroller/create'); ?>">Create new mission</a></li>
                    <li><a href="<?php echo site_url('filecontroller/ShowallTMR'); ?>">List of missions</a></li>
                </ul>
            </li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Manage users <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="<?php echo site_url('auth/createUser'); ?>">Create new user</a></li>
                        <li><a href="<?php echo site_url('backend/users'); ?>">List of all user</a></li>
                    </ul>
                </li>

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Reports<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li class="dropdown submenu"><a href="#">Static reports</a>
                        <ul class="dropdown-menu submenu-show submenu-hide">
                            <li><a href="<?php echo site_url('rptman/trucks_waiting_for_upload') ?>">Trucks waiting for upload</a></li>
                            <li><a href="<?php echo site_url('rptman/trucks_waiting_for_download') ?>">Trucks waiting for download</a></li>
                            <li><a href="<?php echo site_url('rptman/trucks_with_military_escort') ?>">Trucks with Military Escort</a></li>
                            <li><a href="<?php echo site_url('rptman/trucks_with_PSC_escort') ?>">Trucks with PSC Escort</a></li>
                           ...

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; ");