JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<nav>
<ul id="topMenu" class="topmenu">
	<li><a href="#">item-1</a></li>
	<li><a href="#">item-2</a></li>
	<li class="dropdown"><a href="#">More<b class="caret"></b></a>
    <ul class="dropdown-menu show">
      <li><a href="#">Python</a></li>
      <li><a href="#">AngularJS Framework</a></li>
      <li><a href="#">.NET Framework Development</a></li>
      <li><a href="#">Swift App Development</a>   </li>
      <li class="divider"></li>
      <li><a href="Blogs/Java/Java-Page.aspx">Java App Development</a></li>
    </ul>
  </li>
  <li><a href="#">item-4</a></li>
</ul>
</nav>

CSS

a {
  color: #CCC;
  text-decoration: none;
  font-size: 15px;
}

nav {
  float: left;
  width: 100%;
  background: #333;
}

nav a:hover {
  color: #FFF;
}

#topMenu {
  position: relative;
}

ul {
  float: left;
  padding: 0px;
  -webkit-padding-start: 0px;
}

li {
  float: left;
  list-style: none;
  padding: 10px;
}

.show {
  display: block;
}

.dropdown-menu {
  position: absolute;
  width: 300px;
  top: 35px;
  padding: 10px;
  background: blue;
  display: none;
}

.dropdown:hover > a {
  color: #FFF;
}

/*.dropdown:hover > .dropdown-menu {
  display: block;
}*/

.dropdown-menu li {
  float: none;
  padding: 5px;
}

li.divider {
  margin: 10px 0px;
  padding: 0px;
  height: 1px;
  background: #AAA;
}

JavaScript

$('.dropdown').click(function() {
	$('.show').toggle('.show');
});