How to Make a Drop Down Menu using HTML and CSS

How to Make a Drop Down Menu using HTML and CSS

Hello Viewers, Welcome back. Today in this blog, we will learn how to make a simple Drop Down Menu using HTML and CSS. Earlier I have shared a blog on Simple Website Design using HTML and CSS. In this tutorial of CSS dropdown menu hover, we will use plain HTML and CSS to get a navbar's dropdown effect.

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 on the main menu. When someone hovers on any nav-item of the main menu, the submenu associated with it will appear at 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 webpages were built during the development process. Most modern websites nowadays use dropdown menus on their website because it is the best way to organize it.


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

You may like these articles as well:
In the CSS part, I first discarded the default margin and padding of the document by providing a margin and padding of 0 to the universal selector. Then I have given a background image to the body and gave 100vh height to it. After that, I have given a custom width of 860px to the wrapper container and set it to the center by providing margin 0 and auto. Then I gave a custom width of 170px to all the li elements of the unordered list and gave them a relative position value. Then I did basic some basic styling for the li elements by giving them font-size, color, line-height, and so on. Initially, I set the dropdown unordered to display none. When I someone will hover on the li element, the dropdown ul component will appear. I 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, I set an absolute position value with a top value of 0 and a margin-left value of 170px.

Drop Down 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 another one is the CSS file. After that, you need to copy the HTML and CSS code and paste the code to the appropriate files and save them.

HTML:




CSS:




I hope you find it useful. Thank you very for stopping by in this blog. Please visit more often to get this kind of snippet.

1 Comments

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

Post a comment

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

Post a Comment

Previous Post Next Post