JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Torpedo Gratis</a>
        </div>

        <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
            <ul class="nav navbar-nav">
               <li class="dropdown" ><a id="a_learn" class="dropdown-toggle cursor-pointer navbar-bottom-part " data-toggle="dropdown">Learn</a>
                    <ul class="dropdown-menu dropdown-custom learn-drop" role="menu">
                    <li><a ui-sref="training">Training</a></li>
                    <li><a ui-sref="documentation">Documentation</a></li>
                    <!--<li><a href="app.do#/learn/certification">Certification</a></li>-->
                </ul>
                </li>
                
                 <li class="dropdown" ><a id="a_learn" class="dropdown-toggle cursor-pointer navbar-bottom-part " data-toggle="dropdown">Teach</a>
                    <ul class="dropdown-menu dropdown-custom learn-drop" role="menu">
                    <li><a ui-sref="training">Teachers</a></li>
                    <li><a ui-sref="documentation">Students</a></li>
                    <!--<li><a href="app.do#/learn/certification">Certification</a></li>-->
                </ul>
                </li>
                <li><a href="#">Contato</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div>
</nav>

CSS

.navbar {
    margin-bottom: 0;
}

.navbar-default {
    background-color: #8cc152;
    border-color: #a0d468;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #ffffff;
}
.navbar-default .navbar-text {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #a0d468;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #ffffff;
    background-color: #a0d468;
}
.navbar-default .navbar-toggle {
    border-color: #a0d468;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #a0d468;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ffffff;
}
.navbar-default .navbar-link {
    color: #ffffff;
}
.navbar-default .navbar-link:hover {
    color: #ffffff;
}

.dropdown:hover {
background-color: #fff;
color: #000;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}

.dropdown-custom {
right: auto !important;
left: 0px !important;
border-radius: 0px;
border-top: 0px;
background-color: #fff;
border-bottom: 1px solid #DFDFDF;
border-left: 1px solid #DFDFDF;
border-right: 1px solid #DFDFDF;
padding: 25px;
min-width: 175px;
}

li.hover > a {
color: #d1222b !important;
border-radius: 0px;
border: none;
font-weight: bold;
background-color: #fff;
/* border-bottom: 1px solid #ccc; */
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

JavaScript

jQuery(document).ready(function() {
    
   jQuery("li.dropdown").hover(
  function () {
	console.log("hover called");
    jQuery(this).addClass('hover');
  },
  function () {
    jQuery(this).removeClass('hover');
  }
); 
  
});