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 or CSS dropdown menu using HTML and CSS. Earlier I shared a blog post on Simple Website Design using HTML and CSS. In this tutorial on dropdown menu CSS of drop-down menu HTML, we will use plain HTML and CSS to get a navbar's dropdown effect.

What is 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.

In this tutorial (Drop Down Menu using HTML and CSS), at first, In the HTML markup, I 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, I took an unordered list. To create a 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 a margin of 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 someone will hover over 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 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.

HTML:




CSS:




I 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. Please visit more often to get this kind of snippet.

5 Comments

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

  1. I am a beginner. That was helpful

    ReplyDelete
  2. really appreciated , thanks a lot

    ReplyDelete
  3. css file is no linking with html file help!

    ReplyDelete
  4. Replies
    1. vh stands for viewport height and vw is for viewport width.

      Delete

Post a Comment

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

Post a Comment

Previous Post Next Post