How to Make a Drop Down Menu using HTML and CSS

byCodingFlicks -August 07, 2020

5

Hello Viewers, Welcome back. Today in this blog, we will learn how to make a simple dropdown menu or CSS dropdown menu using HTML and CSS. Earlier, we shared a blog post on Simple Website Design using HTML and CSS. In this tutorial on the dropdown menu, we will use plain HTML and CSS to get a navbar's dropdown effect.

What is a CSS Dropdown Menu?

If you are practicing web design, then you must have heard about the dropdown menu. The Dropdown Menu is a sub-menu that appears when visitors of any website hover over the main menu. When someone hovers over any nav item of the main menu, the submenu associated with it will appear on the main menu's bottom. So when a sub-menu appears, visitors can click on one of them to visit the other pages linked to it. Dropdown menus are mostly used for multi-page websites where lots of web pages were built during the development process. Most modern websites nowadays use dropdown menus on their website because it is the best way to organize the website content.

Video Tutorial:

In this tutorial (Drop Down Menu using HTML and CSS), at first, In the HTML markup, we have taken a div named wrapper, which will act as a container of all the navigation content bars we are going to make. After that, we took an unordered list. To create a dropdown menu, we have taken another unordered list inside the Services nav item. To make another submenu under the design submenu, we also took another unordered list.

You may also like:

In the CSS part, we first discarded the default margin and padding of the document by providing a margin and padding of 0 to the universal selector. Then we gave a background image to the body and gave 100vh height to it. After that, we gave a custom width of 860px to the wrapper container and set it to the center by providing a margin of 0 and auto. Then we gave a custom width of 170px to all the li elements of the unordered list and gave them a relative position value. Then we did some basic styling for the li elements by giving them font size, color, line height, and so on. Initially, we set the dropdown unordered to display none. When someone hovers over the li element, the dropdown ul component will appear. we put a display block value to the main navbar li element on hover for this to happen. For the second dropdown menu under the first drop menu, we set an absolute position value with a top value of 0 and a margin-left value of 170px.

Dropdown Menu using HTML and CSS [ Source Code ]

To create this snippet, you need to create two files. One of them is an HTML file, and the other is a CSS file. After that, you need to copy the HTML and CSS code, paste it to the appropriate files, and save them. If you want to download the code, you can do that by clicking the download button below this blog post.

ADD HTML:

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Make a Drop Down Menu using HTML and CSS</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
		<ul>
			<li>home</li>
			<li>About</li>
			<li>Services
				<ul>
					<li>Marketing</li>
					<li>Design
						<ul>
							<li>Web</li>
							<li>Graphics</li>
							<li>Interior</li>
						</ul>
					</li>
					<li>Branding</li>
				</ul>
			</li>
			<li>Portfolio</li>
			<li>Contact</li>
		</ul>
	</div>
</body>
</html>

ADD CSS:

  * {
	margin: 0;
	padding: 0;
}
body {
	background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	height: 100vh;
}
.wrapper {
	width: 860px;
	margin: 0 auto;
}
.wrapper ul {
	list-style: none;
	margin-top: 5%;
}
.wrapper ul li {
	background: #fff;
	width: 170px;
	border: 1px solid #262626;
	height: 50px;
	line-height: 50px;
	text-align: center;
	float: left;
	color: #262626;
	font-size: 16px;
	position: relative;
	font-family: poppins;
	text-transform: uppercase;
	font-weight: bold;
}
.wrapper ul li:hover {
	background: #01efee;
}
.wrapper ul ul {
	display: none;
    margin-top: 0;
}
.wrapper ul li:hover>ul {
	display: block;
}
.wrapper ul ul ul {
	margin-left: 170px;
	top: 0;
	position: absolute;
}

We hope you find it useful. If you want more code snippets about frontend development, then click the load more button below our website homepage. Thank you very much for stopping by this blog. We hope to see you again.

DOWNLOAD CODE

5 Comments

Please do not enter any spam link in the comment box.

Anonymous7 August 2020 at 02:42
I am a beginner. That was helpful
ReplyDelete
Replies
unkiron5 December 2020 at 10:41
really appreciated , thanks a lot
ReplyDelete
Replies
Unknown19 December 2020 at 03:35
css file is no linking with html file help!
ReplyDelete
Replies
Unknown29 December 2021 at 09:01
Height: 100vh
vh means?
ReplyDelete
Replies

Add comment