JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="wrapper">
    	<header>
        	<h1>Menu Dropdown &amp; jQuery - <a href="http://www.dumetschool.com">www.dumetschool.com</a></h1>
        </header>
        <div id="menu">
        	<ul>
            	<li>
                	<a href="#">Technology</a>
                    <ul class="technologysublist">
                    	<li><a href="#">Apple</a></li>
						<li><a href="#">Design</a></li>
						<li><a href="#">Gadgets</a></li>
						<li><a href="#">Hardware</a></li>
						<li><a href="#">Industry News</a></li>
						<li><a href="#">Linux/Unix</a></li>
						<li class="nobord"><a href="#">Microsoft</a></li>
                    </ul>
                </li>
                <li>
                	<a href="#">Products</a>
                    <ul class="worldsublist">
						<li><a href="#" class="sub-1">Web Master</a></li>
						<li><a href="#" class="sub-1">Graphic Design</a></li>
						<li><a href="#" class="sub-1">Web Programming</a></li>
						<li><a href="#" class="sub-1">Digital Marketing</a></li>
						<li class="nobord"><a href="#" class="sub-1">Flash Animation</a></li>
					</ul>
                </li>
                <li>
                	<a href="#">Article</a>
                    <ul class="sciencesublist">
						<li><a href="#" class="sub-2">HTML &amp; CSS</a></li>
						<li><a href="#" class="sub-2">Photoshop</a></li>
						<li class="nobord"><a href="#" class="sub-2">Video Editing</a></li>
					</ul>
                </li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div><!-- End Menu -->
    </div><!-- End Wrapper -->

CSS

/* Thanks for Visit www.dumetschool.com */
* {margin: 0; padding: 0;}

html { overflow-y: scroll; }
body { 
	font: 15px Arial, Helvetica, sans-serif;
	background: #f4f4f4;
}

ul { list-style: none inside; }
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a img { border: none; }

.clear { clear: both; }

a { 
	text-decoration: none; 
	outline: none;
	color: #335588;
	}
	
#wrapper {
	width: 960px;
	margin: auto;
}
header {
	margin: 40px 0;
	color: #333;
}
header a span{
	color: #03F !important; 	
}
header a {
	text-decoration: none;
	color: #333
}
#menu {
	min-height: 40px;
	background-color: #09F;	
}
#menu ul {
	display: block;	
}
#menu ul li {
	float: left;
	line-height: 40px;
	position: relative;
	width: 160px;
	text-align: center;
}
#menu ul li em {
	margin-left: 10px;	
}
#menu ul li a {
	color: #333;
	position: relative;
	display: block;	
}
#menu ul li a:hover {
	text-decoration: underline;
}
#menu ul li ul {
	display: none;
	position: absolute;
	background: #CCC;	
}
#menu ul li ul li {
	float: none;
	height: 100%;
	text-align: left;
	width: 180px;
	border-bottom: 1px solid #999;
}
.worldsublist {
	position: absolute;
	left: 10px;
}
#menu ul li ul li a {
	display: block;
	float: none;
	padding-left: 35px;		
}
#menu ul li ul li .sub-1 {
	padding-left: 25px !important;	
}
.sciencesublist {
	position: absolute;
	left: 10px;	
}
#menu ul li ul li .sub-2 {
	padding-left: 35px !important;	
}
#menu ul li ul li a:hover {
	background-color: #FF0;
	display: block;
	text-decoration: none;	
}
#menu ul li ul .nobord {
	border-bottom: none;	
}

JavaScript

$(document).ready(function(){
		   $("#menu li a").click(function() {
		   		var hidden = $(this).parents("li").children("ul").is(":hidden");
		   		
				$("#menu>ul>li>ul").hide()        
			   	$("#menu>ul>li>a").removeClass();
			   		
			   	if (hidden) {
			   		$(this)
				   		.parents("li").children("ul").toggle()
				   		.parents("li").children("a").addClass("zoneCur");
				   	} 
			   });
		});