All CSS Dropdown Menu – WordPress Friendly & 3 Levels Deep

There are a ton of dropdown menu plugins, examples, downloads, and places to find them. Still, many of them are tricky to implement and often require a lot of customization to get them to work with WordPress. So, here is my version, which in my opinion, gives a dropdown menu in a very simplistic form. This will work with WordPress without any extra effort and can also be used with Bootstrap, Tailwind, Foundation or another CSS framework.

Working Example

The CSS

/* ===== Top ===== */
#navigation ul {
	list-style:none;
	margin:0;
	padding:1px 0;
}
#navigation ul li{
	display:inline-block;
}
/* ===== First Level ===== */				
#navigation ul li {
	position:relative;
	padding:0;
	margin:0;
	border-right:1px solid #999;
	background: #aaa;
}
	#navigation ul ul li {
	border:none;
	background: #777;
}
	#navigation ul li a {
	display:block;
	text-decoration:none;
	font-size:18px;
	color:#fff;
	padding:0 30px;
	line-height:43px;
}
	#navigation ul li:hover a {
	position:relative;
	background:#777;
	color:#fff;
}
#navigation ul ul,	#navigation ul li:hover ul ul {
	position:absolute;
	display:none;
}
#navigation ul ul li:hover ul,		#navigation ul li:hover ul li:hover ul {
	display:block;
	top:0px;
	left: 100%;
}
/* ===== Second and Third Level ===== */
#navigation ul li:hover ul {
	display:block;
	position:absolute;
	left:0;
	top:100%;
	width:auto;
	height:auto;
	margin:0;
	padding:0;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
#navigation ul ul {
	background:#777;
}
#navigation ul ul ul {
	background:#e4e4e4 !important;
	border-color:#e4e4e4 !important;
	margin-left:-14px;
}
#navigation ul ul li a {
	float:none;
	width:180px;
	line-height:normal;
	font-variant:normal;
	font-weight:normal;
	font-size:14px;
	color:#fff;
	text-transform:none;
	padding:6px 10px;
	background:none !important;
}
#navigation ul ul ul li a {
	color:#fff;
	font-weight:bold;
}
#navigation ul ul li:hover>a {
	background:#fff !important;
	color:#999 !important;
}
#navigation ul ul ul li:hover>a {
	background:#eee !important;
	color: #777 !important;
}

The HTML

<div id="navigation">
	<ul>
		<li><a href="">About</a></li>
		<li><a href="">Home</a></li>
		<li><a href="">Services</a>
		<ul>
			<li><a href="">Construction</a></li>
			<li><a href="">Home Building</a></li>
			<li><a href="">Wood Work >></a>
			<ul>
				<li><a href="">Deck Building</a></li>
				<li><a href="">Custom Cabinets</a></li>
			</ul>
			</li>
			<li><a href="">Welding</a></li>
		</ul>
		</li>
		<li><a href="">Contact</a></li>
	</ul>
</div>

You can use this dropdown menu with WordPress or any modern CSS framework.