<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Dropdown Menu using HTML and CSS</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  	<div class="container">
  		<nav>
  			<ul>
  				<li><a href="">ACCUEIL</a></li>
  				<li><a href="">PRESENTATION</a>
  					<ul>
		  				<li><a href="">One</a></li>
		  				<li><a href="">Two</a></li>
		  				<li><a href="">Three</a></li>
  						
  					</ul>
  					<li><a href="">REALISATION</a>
  						<ul>
			  				<li><a href="">demo 1</a></li>
			  				<li><a href="">demo 2</a></li>
			  				<li><a href="">demo 3</a>
			  					<ul>
					  				<li><a href="">sous demo 1</a></li>
					  				<li><a href="">sous demo 2</a></li>
					  				<li><a href="">sous demo 3</a>
					  					<ul>
							  				<li><a href="">sous demo 1</a></li>
							  				<li><a href=""> sous demo 2</a></li>
							  				<li><a href=""> sous demo 3</a></li>
					  						
					  					</ul>
					  				</li>
			  						
			  					</ul>
			  				</li>
  							
  						</ul>
  					</li>
  				</li>
  				<li><a href="">SERVICES</a></li>
  				<li><a href="">PRODUCTIONS</a></li>
  				<li><a href="">A-PROPOS</a></li>
  				<li><a href="">CONTACTS</a></li>
  			</ul>
  		</nav>
  	</div>

</body>
</html>
body{
	margin: 5px;
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	line-height: 32px;
	color: #fff;
}

nav{
	background-color: #008ea1;
}
nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
nav ul li{
	display: inline-block;
	background-color: #008ea1;
}
nav a{
	display: block;
	padding: 0 10px;
	color: #fff;
	line-height: 60px;
	font-size: 20px;
	text-decoration: none;
}
nav ul ul{
	display: none;
	position: absolute;
	top: 60px;
}
nav a:hover{
	background-color: #f8e80c;
}
nav ul li:hover > ul{
	display: inherit;
}
nav ul ul li {
	width: 170px;
	float: none;
	display: list-item;
	position: relative;
}
nav ul ul ul li{
	position: relative;
	top: -60px;
	left: 170px;
}
li > a::after{
	content: ' ^';
}
li > a:only-child::after{
	content: '';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.