محرر ويب أونلاين

<!DOCTYPE html>
<html>
	<head>
		<style>
h1 {
	text-align: center;
    font-family: arial;
}

nav {
    background-color: #333;
    font-family: arial;
    font-size: 14px;
}

nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}

nav ul li {
	display: inline-block;
	background-color: #333;
}

nav a {
	display: block;
	padding: 0 15px;
	color: white;
	line-height: 45px;
	text-decoration: none;
}

nav a:hover { 
	background-color: cadetblue; 
}

nav ul ul {
	display: none;
	position: absolute;
	top: 45px; 	
}

nav ul li:hover > ul {
	display: inherit;
}

nav ul li:hover > a {
	background-color: cadetblue; 
}

nav ul ul li {
	width: 150px;
	float: none;
	display: list-item;
	position: relative;
	border: 1px solid #555;
}

nav ul ul ul li {
	position: relative;
	top: -45px; 
	left: 150px;
}
		</style>
	</head>
	<body> 
		<h1>Nested Dropdown Menus</h1>
		<nav>
			<ul>
				<li><a href="javascript:void(0)">Menu ▾</a>
					<ul>
						<li><a href="#">Link 1</a></li>
						<li><a href="#">Link 2</a></li>
						<li><a "javascript:void(0)">Sub Menu ▸</a>
							<ul>
								<li><a href="#">Link 1</a></li>
								<li><a href="#">Link 2</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
			</ul>
		</nav>	
	</body>
</html>