How to Create a Dropdown Menu in HTML and CSS

 

Hi Friends, In this blog, I will share another snippet based on How to Create a Dropdown Menu in HTML and CSS. Previously I have another snippet on CSS Dropdown Menu. Check that out also if you want.

I am sure you have heard about the dropdown menu. It is a list of links below the nav item when the user hovers over a particular nav item. In this way, the user can roam around the entire website by clicking each dropdown menu items.

Through this snippet, you will learn how to create a CSS navigation menu with dropdown. This post will help those who are learning HTML and CSS and at their beginner's label. I am trying to say if you are a newbie in web design and development. You can use this snippet in your project, modifying the style and looks if you want to create a pure CSS menu, then this snippet will be useful for you.

In this HTML Markup, I have taken a div element named 'nav-area' and placed an unordered list item called 'menu.' then, I have created five list items inside the anchor tags. I have selected the 'service' nav item from those nav items to complete the dropdown menu as it suits better. Then I have made three layers of sub-menus inside it with unordered list and anchor tags. I have used repeated text for each submenu, but you can change the text later when you get the code.

You May Also Like:

• Website Design using HTML CSS
• Accordion Design HTML and CSS

After some basic stying of the navbar, I have given display none property to the dropdown menu but provided a display block property on hover. I have used plain HTML and CSS to make the pure CSS dropdown menu, and all the styling I used here are self-explanatory. Without explaining further, I am giving you the code so that you can play around with it.

To create the project, you have to make one HTML and one CSS file. Copy and paste the codes down below and save. run the project in your browser and modify it according to your needs.

HTML

<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>


CSS 

body{ margin: 0; padding: 0; font-family:poppins; background: #00A8FF; 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; }

I hope it helps you. Please follow us on our Facebook, Twitter profiles to stay connected. Thank you so much for visiting the blog.