Multilevel Dropdown Menu with Pure CSS

by Vincy. Last modified on July 12th, 2022.

Showing multilevel menu dropdown with only CSS and HTML is very simple and easy. In a previous tutorial, we have shown single level menu dropdown using jQuery.

In this tutorial, we are doing it for the multi-level menu without jQuery or any Javascript.

View Demo Download

HTML Code for Multilevel Menu

This HTML code with the nested unordered list is used for showing menu in multilevel.

multi-level-menu-dropdown

<ul id="menu">
	<li class="parent"><a href="#">Popular Toys</a>
		<ul class="child">
			<li class="parent"><a href="#">Video Games <span class="expand">»</span></a>
				<ul class="child">
					<li><a href="#">Car</a></li>
					<li><a href="#">Bike Race</a></li>
					<li><a href="#">Fishing</a></li>
				</ul></li>
			<li><a href="#">Barbies</a></li>
			<li><a href="#">Teddy Bear</a></li>
			<li><a href="#">Golf Set</a></li>
		</ul></li>
	<li class="parent"><a href="#">Recent Toys</a>
		<ul class="child">
			<li><a href="#">Yoyo</a></li>
			<li><a href="#">Doctor Kit</a></li>
			<li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a>
				<ul class="child">
					<li><a href="#" nowrap>Cards</a></li>
					<li><a href="#" nowrap>Numbers</a></li>
				</ul></li>
			<li><a href="#">Uno Cards</a></li>
		</ul></li>
	<li class="parent"><a href="#">Toys Category</a>
		<ul class="child">
			<li><a href="#">Battery Toys</a></li>
			<li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a>
				<ul class="child">
					<li><a href="#">Cars</a></li>
					<li><a href="#">Aeroplane</a></li>
					<li><a href="#">Helicopter</a></li>
				</ul></li>
			<li><a href="#">Soft Toys</a></li>
			<li><a href="#">Magnet Toys</a></li>
		</ul></li>
</ul>

Multilevel Menu CSS

Initially, we are showing only the list of parent menu items. On mouse over, the child items are displayed by using CSS: hover selector.

We are controlling the child menu list position based on the corresponding parent menu item using this Stylesheet. The styles are,

.parent {
	display: block;
	position: relative;
	float: left;
	line-height: 30px;
	background-color: #4FA0D8;
	border-right: #CCC 1px solid;
}

.parent a {
	margin: 10px;
	color: #FFFFFF;
	text-decoration: none;
}

.parent:hover>ul {
	display: block;
	position: absolute;
}

.child {
	display: none;
}

.child li {
	background-color: #E4EFF7;
	line-height: 30px;
	border-bottom: #CCC 1px solid;
	border-right: #CCC 1px solid;
	width: 100%;
}

.child li a {
	color: #000000;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0px;
	min-width: 10em;
}

ul ul ul {
	left: 100%;
	top: 0;
	margin-left: 1px;
}

li:hover {
	background-color: #95B4CA;
}

.parent li:hover {
	background-color: #F0F0F0;
}

.expand {
	font-size: 12px;
	float: right;
	margin-right: 5px;
}

View Demo Download