JSFiddle - React, Tailwind, and code Playground

HTML

<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>

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

$(document).ready(function() {
	$('.pestana').hide().eq(0).show();
	$('.tabs li').click(function(e) {
	    e.preventDefault();
        e.stopPropagation();
	    $('.pestana').hide();
	    $('.tabs li').removeClass("selected");
	    var id = $(this).find("a").attr("href");
	    $(id).fadeToggle();
	    $(this).addClass("selected");
	});
});