A CodePen by Jorge Epuñan. CSS dropdown horizontal nav - No JS, just plain CSS (IE8+)

index.html

<ul class="nav">
	<li><a href="#">One</a></li>
	<li class="dropdown">
		<a href="#">Dois</a>
		<ul>
			<li><a href="#">Dois Um</a></li>
			<li><a href="#">Dois Dois</a></li>
			<li class="dropdown">
				<a href="#">Dois Tres</a>
				<ul>
					<li><a href="#">Dois Tres Um</a></li>
					<li><a href="#">Dois Tres Dois</a></li>
					<li><a href="#">Dois Tres Tres</a></li>
					<li class="dropdown">
						<a href="#">Dois Tres Quatro</a>
						<ul>
						<li><a href="#">Dois Tres Quatro Um</a></li>
						<li><a href="#">Dois Tres Quatro Dois</a></li>
						<li><a href="#">Dois Tres Quatro Tres</a></li>
						<li><a href="#">Dois Tres Quatro Quatro</a></li>
				</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Trois</a></li>
	<li><a href="#">Cuatro</a></li>
	<li><a href="#">Funf</a></li>
</ul>

script.js

//CSS dropdown horizontal nav (no JS)

style.css

.nav {
	position: relative;
	line-height: 22px;
}
	.nav>li {
		display: block;
		float: left;
		margin: 0;
		padding: 0;
	}
		.nav>li>a {
			display: block;
			position: relative;
			padding: 10px 20px;
			font-family: Tahoma, Verdana, Segoe, sans-serif;
      text-transform: uppercase;
			color: #fff;
			font-size: 18px;
			text-decoration: none;
			background-color: #c0392b;
			transition: color .3s ease-in;
		}
		.nav>li>a:hover, .nav>li:hover>a {
			background-color: #e74c3c;
		}
		.nav>.dropdown>a {
			padding: 10px 30px 10px 20px;
		}
		.dropdown>a:after {
			 content: "";
			 position: absolute;
			 top: 17px;
			 right: 10px;
			 width: 7px;
			 height: 7px;
			 transform: rotate(45deg);
			 border-bottom: 1px solid #fff;
			 border-right: 1px solid #fff;
			}
		.dropdown>a:hover:after, .dropdown:hover>a:after {
			border-color: #c0392b;
		}
		.nav ul {
			position: absolute;
			margin: 0;
			padding: 0;
			list-style: none;
			display: block;
		}
		.nav ul li {
			position: absolute;
			top: -9999px;
			height: 0px; 
			display: block;
			margin: 0;
			padding: 0;
			transition: height .2s ease-in;
		}
		.dropdown:hover>ul>li {
			height: 30px;
			position: relative;
			top: auto;
		}
			.nav ul li a {
				padding: 4px 20px;
				width: 180px;
				display: block;
				position: relative;
				font-family: Tahoma, Verdana, Segoe, sans-serif;
				color: #fff;
				text-decoration: none;
				font-size: 14px;
				background-color: #e74c3c;
				transition: color .3s ease-in, background .3s ease-in;
			}
			.nav ul li:hover>a, .nav ul li a:hover {
				color: #fff;
				background-color: #c0392b;
			}
			.nav ul .dropdown:hover ul {
				left: 220px;
				top: 0;
			}
			.nav ul .dropdown a:after{
				width: 6px;
				height: 6px;
				border-bottom: 0;
				border-right: 1px solid #fff;
				border-top: 1px solid #fff;
				top: 12px;
			}
			.nav ul .dropdown:hover>a:after, .nav ul .dropdown>a:hover:after {
				border-right: 1px solid #e74c3c;
				border-top: 1px solid #e74c3c;
			}