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 DemoDownload

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 DemoDownload

Popular Articles

↑ Back to Top

Share this page