How to Create a Drop Down Menu Using only HTML and CSS

In one of the previous articles, we looked at creating a drop down menu using JavaScript (jQuery). In this article, we will look at how to make a drop down menu using only HTML and CSS. This implementation is not always suitable for everyone, but in some cases it can be useful. Our menu will be horizontal. The menu items will have a fixed width. Let’s set position: relative for all list elements. And let’s set position: absolute for the nested menu. The submenu will appear when you hover the mouse over the parent element. All the mechanics are achieved thanks to the pseudo-class :hover. Our menu will contain several levels of nesting.

Video

HTML

<ul class="menu">
	<li>
		<a href="#">Item 1</a>
		<ul>
			<li><a href="#">Subitem 1-1</a></li>
			<li>
				<a href="#">Subitem 1-2</a>
				<ul>
					<li><a href="#">Subitem 1-2-1</a></li>
					<li><a href="#">Subitem 1-2-2</a></li>
					<li><a href="#">Subitem 1-2-3 </a></li>
				</ul>
			</li>
			<li>
				<a href="#">Subitem 1-3</a>
				<ul>
					<li><a href="#">Subitem 1-3-1</a></li>
					<li><a href="#">Subitem 1-3-2</a></li>
					<li><a href="#">Subitem 1-3-3</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">Item 2</a>
		<ul>
			<li>
				<a href="#">Subitem 2-1</a>
				<ul>
					<li><a href="#">Subitem 2-1-1</a></li>
					<li><a href="#">Subitem 2-1-2</a></li>
					<li><a href="#">Subitem 2-1-3</a></li>
				</ul>
			</li>
			<li><a href="#">Subitem 2-2</a></li>
			<li><a href="#">Subitem 2-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
</ul>

CSS

.menu {
	display: flex;
}

.menu li {
	width: 200px;
	list-style: none;
	position: relative;
}

.menu a {
	display: block;
	color: #fff;
	background: #07355e;
	text-decoration: none;
	text-align: center;
	height: 40px;
	line-height: 40px;
	transition: all 0.5s;
}

.menu a:hover {
	opacity: 0.8;
}

.menu ul {
	position: absolute;
	left: 0;
	top: 100%;
	display: none;
	padding: 0;
}

.menu li:hover > ul {
	display: block;
}

.menu ul ul {
	top: 0;
	left: 100%;
}

You can see an example of how the menu might look and work on Codepen: https://codepen.io/igorrybalko/pen/EaaopVO

The drop-down menu is one of the most common interface elements used on modern websites. It can be found in navigation bars, headers, dashboards, and various types of web applications. Its popularity comes from the fact that it allows developers to organize large amounts of links or options in a compact and structured way without overloading the interface.

From a user’s perspective, drop-down menus are familiar and intuitive. Most users already understand how they work, which makes navigation faster and more comfortable. In addition, a well-designed drop-down menu can improve the overall look of a website, making it appear cleaner and more professional while maintaining usability.