HTML and CSS Menu with Submenus and more Submenus

Create a top menu just like the one on this site.

All the magic happens when float:left; is added and when display:block; is added to the #menu div ul li:hover > ul { } part.

Other parts worth mentioning are position:relative; which makes sure that the sub menus lay on top of (or over) the content below them AND that the position:absolute; applies properly.

Experiment with removing one of these special parts then looking at the results in a web browser, but just remove one at a time until comfortable with what each is doing. The > sign is a child selector and it selects all the ul that are children of the li.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>HTML and CSS Menu System</title>
	<style>
	body {
		margin: 0;
		padding: 0;
		background-color: #eee;
	}
	#menu {
	position: relative;
	width: 100%;
	text-align: center;
	}
	#menu div {
		display: inline-block;
	}
	#menu div ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#menu div ul li {
		float: left;
		width: 150px;
		height: 40px;
		background-color: #2f87ca;
		line-height: 40px;
		text-align: center;
		position: relative;
	}
	#menu div ul li a {
		text-decoration: none;
		color: #eee;
		display: block;
		border: none;
		position: relative;
		overflow: hidden;
		transition: .6s;
	}
	#menu div ul li a:visited {
		color: white;
	}
	#menu div ul li a:before {
		content: "";
		display: block;
		position: absolute;
		transition: all 0.6s ease;
		background-color: rgba(255,255,255,.75);
		width: 60px;
		height: 100%;
		left: 0;
		top: 0;
		opacity: .5;
		filter: blur(30px);
		transform: translateX(-130px) skewX(-15deg);
	}
	#menu div ul li a:after {
		content: "";
		display: block;
		position: absolute;
		background-color: rgba(255,255,255,.75);
		width: 30px;
		height: 100%;
		left: 30px;
		top: 0;
		opacity: 0;
		filter: blur(30px);
		transform: translate(-100px) scaleX(-15deg);
	}
	#menu div ul li a:hover {
		color: white;
		background-color: green;
	}
	#menu div ul li a:hover:before {
		transform: translateX(300px) skewX(-15deg);
		opacity: .6;
		transition: .9s;
	}
	#menu div ul li a:hover:after {
		transform: translateX(300px) skewX(-15deg);
		opacity: 1;
		transition: .9s;
	}
	#menu div ul li a:visited {
		color: #eee;
	}
	#menu div ul ul {
		visibility: hidden;
		opacity: 0;
		transition: .1s;
	}
	#menu div ul li:hover > ul {
		transition: .5s;
		visibility: visible;
		opacity: 1;
	}
	#menu div ul ul ul {
		margin-left: 150px;
		top: 0;
		position: absolute;
	}
	</style>
</head>
<body>
	<div id="menu">
		<div>
			<ul>
				<li><a href="#">menu bar</a>
					<ul>
						<li><a href="#">submenu</a>
							<ul>
								<li><a href="#">subsubmenu</a></li>
								<li><a href="#">subsubmenu</a></li>
							</ul>
						</li>
						<li><a href="#">submenu</a>
							<ul>
								<li><a href="#">subsubmenu</a></li>
								<li><a href="#">subsubmenu</a></li>
								<li><a href="#">subsubmenu</a></li>
								<li><a href="#">subsubmenu</a></li>
								<li><a href="#">subsubmenu</a></li>
							</ul>
						</li>
						<li><a href="#">submenu</a></li>
						<li><a href="#">submenu</a></li>
					</ul>
				</li>
				<li><a href="#">menu bar</a>
					<ul>
						<li><a href="#">submenu</a></li>
						<li><a href="#">submenu</a>
							<ul>
								<li><a href="#">subsubmenu</a></li>
								<li><a href="#">subsubmenu</a></li>
								<li><a href="#">subsubmenu</a></li>
								<li><a href="#">subsubmenu</a></li>
								<li><a href="#">subsubmenu</a></li>
								<li><a href="#">subsubmenu</a></li>
							</ul>
						</li>
						<li><a href="#">submenu</a></li>
					</ul>
				</li>
				<li><a href="#">menu bar</a>
					<ul>
						<li><a href="#">submenu</a></li>
						<li><a href="#">submenu</a></li>
						<li><a href="#">submenu</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
</body>
</html>