How to Create Drop Down Navigation Menu with CSS and HTML

byCodingFlicks -July 01, 2021

0

A navigation menu acts as the backbone to guide visitors properly on a website or web app. It actually acts as a roadmap for the visitors. It is a set of structured links and is usually found at the top, sidebar, or footer. It actually helps users find what they need quickly. A dropdown menu is a list of sub-options that appear when you click or hover over the main menu. Today, we will share with you a snippet of creating a three-level dropdown menu with the help of HTML and CSS. Below is a video tutorial showing the whole snippet being created. I hope you will watch the video tutorial and give your feedback.

Video Tutorial:

We hope you have watched the above video tutorial about HTML CSS Dropdown Menu. It is basically a concise way to present additional navigation choices without cluttering the main interface. It works as an interesting job for complex websites with multiple sections or pages. To make navigation easier, reduce extra stress, and keep any kind of design clean, dropdown menus are essential. However, overuse or poor implementation of dropdown menus can frustrate visitors as they will feel confused if they see a long list of items there. If we implement it effectively, it will increase the efficiency of a website.

We have taken a nav element with the class 'nav-area' in the HTML markup. Inside it, we have taken an unordered list with five nav elements. Under the 'services' item, we have created a dropdown menu with the required nav items. You can keep yours while changing it by yourself. In the CSS part, first, we have given the body tag a background color and a height of 100vh. We have adjusted the default margin and padding by setting them to zero. Later, we have given the li element a relative position value and styled the elements with some basic CSS styles. For the unordered list under the main list, we have given it a position absolute value and given it a width of 160px. Initially, the display property for the dropdown ul element will be none, but when we hover over the corresponding nav item, the display will be 'block'. Without further explanation, we are providing the source code for your convenience.

You May Also Like:

How to Create a Dropdown Menu in HTML and CSS [ Source Code ]:

To create this HTML CSS Dropdown Menu, you will need one HTML file and one CSS file. Then, copy the code from the code box below and paste it into your files. You can also download the full code from the download button at the bottom of 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 Create a Dropdown Menu in HTML and CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="nav-area">
        <ul class="menu">
        <li><a href="#">home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a>
          <ul>
            <li><a href="#">Service One</a></li>
            <li><a href="#">Service Two</a></li>
            <li><a href="#">Service Three</a></li> 
            <li><a href="#">Service Four</a>
              <ul>
                <li><a href="#">Service One</a></li>
                <li><a href="#">Service Two</a></li>
                <li><a href="#">Service Three</a></li>
                <li><a href="#">Service Four</a>
                  <ul>
                    <li><a href="#">Service One</a></li>
                    <li><a href="#">Service Two</a></li>
                    <li><a href="#">Service Three</a></li>
                    <li><a href="#">Service Four</a></li>
                    <li><a href="#">Service Five</a></li>
                  </ul>
                </li>
                <li><a href="#">Service Five</a></li>
              </ul>
            </li>
            <li><a href="#">Service Five</a></li>
          </ul>
        </li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </nav>
        
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
	font-family: poppins;
	background: darkgoldenrod;
	height: 100vh;
}
a {
	font-size: 12px;
	text-transform: uppercase;
}
.nav-area {
	background: #262626;
}
.nav-area:after {
	content: '';
	clear: both;
	display: block;
}
.nav-area ul {
	list-style: none;
	margin: 0;
}
.menu {
	width: 500px;
	margin: 0 auto !important;
}
.nav-area>ul>li {
	float: left;
	position: relative;
}
.nav-area ul li a {
	text-decoration: none;
	color: #fff;
	padding: 15px 20px;
	display: block;
	font-weight: 500;
	letter-spacing: 1px;
}
.nav-area ul li:hover a {
	background: #34495e;
}
.nav-area ul ul {
	position: absolute;
	padding: 0;
	min-width: 160px;
	display: none;
	top: 100%;
	left: 0;
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
}
.nav-area ul li:hover>ul {
	display: block;
}
.nav-area ul ul li:hover a {
	background: #262626;
}
.nav-area ul ul li {
	position: relative;
}
.nav-area ul ul ul {
	top: 0;
	left: 100%;
}
.nav-area ul ul ul li:hover a {
	background: #34495e;
}

A navigation with a dropdown menu is a critical component of a website. In order to guide users through the website's core sections or pages, they play a vital role. To manage complex content hierarchies, a drop-down menu works as a space-efficient way. Lots of e-commerce, corporate, educational, or news platforms use dropdown menus to reduce bounce rates, boost engagement, and improve SEO. They are also using it to encourage exploration and drive conversions. We hope you have collected the source code. For more, please click the load more button on our homepage. Thank you for visiting our website.

DOWNLOAD CODE

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