JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="es">

	<head>
	<title>titulo</title>
		
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--[if lt IE 9]>
	<script type="text/javascript">
    "'article aside footer header nav section time'".replace(/\w+/g,function(n){document.createElement(n)});
	</script>
	<![endif]-->
		
	<link rel="stylesheet" href="menu_superior.css" type="text/css" media="screen" />
    
	<script src="js/jquery.min.js"></script>
    
	<script type="text/javascript">
	$(document).ready(function() 
	{
	$('.pestana').hide().eq(0).show();
	$('.tabs li').click(function(e)
	{
	e.preventDefault();
	$('.pestana').hide();
	$('.tabs li').removeClass("selected");
	var id = $(this).find("a").attr("href");
	$(id).fadeToggle();
	$(this).addClass("selected");
	});
	});
	</script>
 
</head>
	
	<body>

	<section class="menu_superior">
        
	<ul class="tabs" id="unidad_1_nav">
    
    <li class="selected"><a href="#tab-1">menu 1</a></li>
	<li><a href="#tab-2">menu 2</a></li>       
	<li><a href="#tab-3">menu 3</a></li>
                
	<li><a href="#">menu 4</a>
	<ul class="subs">
	<li><a href="#" >SubMenu 1</a></li>
	<li><a href="#" >SubMenu 1</a></li>
	<li><a href="#" >SubMenu 1</a></li>
	</ul>
	</li>
                
	<li><a href="#">menu 5</a>
	<ul class="subs">
	<li><a href="#tab-4" >SubBotón 1</a></li>
	<li><a href="#" >SubMenu 2</a></li>
	<li><a href="#" >SubMenu 3</a></li>
	<li><a href="#" >SubMenu 4</a></li>
	</ul>
	</li>
      
	</ul> 
	</section>
  
    <div class="pestana" id="tab-1">
	<h2>Pestaña 1</h2>
	<p>texto 1...</p>
	</div>
    
	<div class="pestana" id="tab-2">
	<h2>Pestaña 2</h2>
	<p>texto 2...</p>
	</div>
    
	<div class="pestana" id="tab-3">
	<h2>Pestaña 3</h2>
	<p>texto 3...</p>
	</div>
    
    <div class="pestana" id="tab-4">
	<h2>Pestaña 4</h2>
	<p>texto 4...</p>
	</div>
	
    </body>
</html>

CSS

.marco_volver_home{
	width: 80px;
	float: left;
	display: inline;
	height: 35px;
}

.marco_volver_home a{
	color: #FFF;
	text-decoration: none;
	position: relative;
	float: left;
	line-height: 35px;
}

.marco_volver_home a:hover{
	color: #F00;
}

.marco_volver_home img{
	width: 25px;
	height: 25px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-top: 5px;
	margin-left: 5px;
	float: left;
	margin-right: 5px;
}

.menu_superior {
	margin-left: 240px;
	width: 710px;
	background-color: #CCC;
	position: absolute;
	top: 65px;
	border-radius: 5px 5px 5px 5px;
}

#unidad_1_nav,#nav ul {
	list-style: none outside none;
    margin: 0;
    padding: 0;
}

#unidad_1_nav {
	background-color: transparent;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
	display: table;
	position: relative;
	z-index: 9999;
	width: 710px;
}

#unidad_1_nav ul {
	background-color: #999;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-top: 4px;
	border-radius: 0 0px 5px 5px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	position: absolute;
	overflow: hidden;
	left: -9999px;
	top: -9999px;
}

#unidad_1_nav li {
	float: left;
	position: relative;
}

#unidad_1_nav li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-decoration: none;
	color: #000;
	display: block;
	padding-top: 7px;
	padding-right: 10px;
	padding-bottom: 7px;
	padding-left: 10px;
}

#unidad_1_nav li:hover a {
	color: #FFF;
	background-color: #999;
}

#unidad_1_nav li:hover ul.subs {
	left: 0;
	top: 29px;
	width: 180px;
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	-webkit-transform: scaleY(1);
}

#unidad_1_nav ul li {
    width: 100%;
}

#unidad_1_nav ul li:hover > a {
	background-color: #666 !important;
}




/* PESTANAS */

ul.tabs{
	height:30px;
	width:100%;
	margin:0;
	padding:0;
	list-style:none
	}
	
.tabs li{
	float:left;
	}
	
.tabs...

JavaScript

/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/(function(e,t){var n,r,i=typeof t,o=e.document,a=e.location,s=e.jQuery,u=e.$,l={},c=[],p="1.9.1",f=c.concat,d=c.push,h=c.slice,g=c.indexOf,m=l.toString,y=l.hasOwnProperty,v=p.trim,b=function(e,t){return new b.fn.init(e,t,r)},x=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,w=/\S+/g,T=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,N=/^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,k=/^[\],:{}\s]*$/,E=/(?:^|:|,)(?:\s*\[)+/g,S=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,A=/"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,j=/^-ms-/,D=/-([\da-z])/gi,L=function(e,t){return t.toUpperCase()},H=function(e){(o.addEventListener||"load"===e.type||"complete"===o.readyState)&&(q(),b.ready())},q=function(){o.addEventListener?(o.removeEventListener("DOMContentLoaded",H,!1),e.removeEventListener("load",H,!1)):(o.detachEvent("onreadystatechange",H),e.detachEvent("onload",H))};b.fn=b.prototype={jquery:p,constructor:b,init:function(e,n,r){var i,a;if(!e)return this;if("string"==typeof e){if(i="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof b?n[0]:n,b.merge(this,b.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:o,!0)),C.test(i[1])&&b.isPlainObject(n))for(i in n)b.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(a=o.getElementById(i[2]),a&&a.parentNode){if(a.id!==i[2])return r.find(e);this.length=1,this[0]=a}return this.context=o,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):b.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),b.makeArray(e,this))},selector:"",length:0,size:function(){return this.length},toArray:function(){return h.call(this)},get:function(e){return...