JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-hover-dropdown/2.2.1/bootstrap-hover-dropdown.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="navbar" class="navbar-collapse collapse in">
<ul class="right-top__box__menu__block">
<li class="right-top__box__menu__block__list dropdown">
<a href="#" title="My Account" class="right-top__box__menu__block__list__link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Account</a>
<ul id="menu88" class="dropdown-menu child__minitop__menu__block" aria-labelledby="drop161">
<li class="child__minitop__menu__block__list"><a href="#" class="child__minitop__menu__block__link">Sign In</a></li>
<li class="child__minitop__menu__block__list"><a href="#" class="child__minitop__menu__block__link">Create Account</a></li>
</ul>
</li>
</ul>
</div>
CSS
.right-top__box__menu__block {
list-style-type: none;
display: inline-block;
}
.right-top__box__menu__block__list {
display: inline-block;
}
.right-top__box__menu__block__list__link {
color: #333;
font: 12px/12px arial;
text-decoration: none;
padding-left: 0px;
}
.right-top__box__menu__block__list__link:hover{
color: #c2b88e;
text-decoration: none;
}
.child__minitop__menu__block{
border-radius: 2px;
}
.child__minitop__menu__block__link{
color: #333;
font: 12px arial;
text-decoration: none;
padding: 2px 10px;
}
.child__minitop__menu__block__link:hover{
background: none!important;
color: #c2b88e;
font: 12px arial;
text-decoration: none;
}