In this tutorial we will see How to Create Dropdown Link for Menu with HTML and CSS. Simple HTML and CSS is used for this purpose, complete code is given.
Table of Contents
HTML Code
Take a look at the HTML code given below.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>How To Create Dropdown Link for Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li>
<a href="#">Profile ▾</a>
<ul class="dropdown">
<li><a href="#">Messages</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</body>
</html>
CSS Code
CSS code is given below.
<style>
* {
padding: 0;
margin: 0;
font-family: monospace;
}
ul {
text-align: center;
list-style: none;
background: #111827;
}
ul li {
display: inline-block;
position: relative;
}
ul li a {
display: block;
padding: 20px 25px;
color: #E0E7FC;
text-decoration: none;
text-align: center;
font-size: 20px;
}
ul.dropdown li {
display: block;
}
ul li a:hover {
background: #374151;
color:#E5E7EB;
}
ul.dropdown {
width: 100%;
position: absolute;
z-index: 999;
display: none;
}
ul li:hover ul.dropdown {
display: block;
}
</style>
Video Tutorial
Watch our video tutorial on How to Create Dropdown Link for Menu with HTML and CSS.