JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<nav>
	<ul>
		<li><a href="#" class="activo">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Ministries</a>
			<ul>
				<li><a href="#">Women</a></li>
				<li><a href="#">Men</a></li>
				<li><a href="#">Kids</a></li>
				<li><a href="#">Others</a>
					<ul>
						<li><a href="#">Family</a></li>
						<li><a href="#">Marrieges</a></li>
					</ul>
				</li>
			</ul>

		</li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
</body>

CSS

@import url('http://meyerweb.com/eric/tools/css/reset/reset.css');
body{ font-family: 'Open Sans', sans-serif; font-weight: lighter; }
nav { background-color: #e74c3c; text-align: center; width: 700px; margin: 0 auto; height: 42px; }
nav ul { list-style: none; position: relative; display: inline-table;}
nav ul:after { content: ""; clear: both; display: block; }
nav ul li:hover > ul { display: block; }
nav ul li { float: left; text-transform: uppercase;  }
nav ul li a { display: block; padding: 10px 20px 10px 10px; color: #fff; text-decoration: none; font-size: 24px; }
nav ul li a:hover { color: #2c3e50; }
nav ul ul { display: none; background: #e74c3c; border-radius: 0px; padding: 0; position: absolute; top: 100%; }
nav ul ul li { float: none; border-bottom: 1px solid #fff; position: relative; }
nav ul ul li a { padding: 15px 15px 5px 15px; color: #fff; }	
nav ul ul ul { position: absolute; left: 100%; top:0; }