Modern technology gives us many things.

How to Create a Basic Dropdown Menu using HTML and CSS

0 169

Basics of a Dropdown Menu

I bet, with all the time you spend on the internet, the number of times you have encountered a dropdown must be innumerable. To give you a better picture about it, any element or a place in a website where you take your mouse over it or click upon it and a content appears right below it. And it disappears as soon as you move your focus away from it. They are used in various places like headers or forms. Hence, today we will learn How to Build a Dropdown Menu using HTML and CSS.

How to build a dropdown?

To build a dropdown, all you need to know is a tiny bit of HTML and a basic understanding of few styles in CSS. To be specific, you need to know only display, position and selectors to build your own dropdown but here in my example, I have used more styles to just make it look good.

Enough talk, let’s start coding.

Html –
<div class=”dropdown”>
  <button class=”dropdown-btn”>Contact Us</button>
  <div class=”dropdown-content”>
    <a href=”#”>Call</a>
    <a href=”#”>Email</a>
    <a href=”#”>Walk In</a>
  </div>
</div>
Result –
Dropdown Menu using HTML & CSS

Dropdown is nothing but a container(‘dropdown’) which encloses a button(‘dropdown-btn’) and a content box(‘dropdown-content’) which becomes visible when hovered over the button.

Now lets add style to these elements so that it actually behaves like one.

CSS –
.dropdown {
  position: relative;
}

/* creating a custom button */
.dropdown-btn {
  padding: 0.8em 1.6em;
  cursor: pointer;
  display: block;
  overflow: hidden;
  border-width: 0;
  outline: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  background-color: #2ecc71;
  color: #fbfbfb;
  transition: background-color .3s;
  font-size: 1em;
}

.dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  z-index: 1;
}

.dropdown-content > a {
  display: block;
  padding: 0.6em;
  color: #777;
  text-decoration: none;
  font-size: 1em;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover > .dropdown-content {
  display: block;
}
Result –
Dropdown Menu using HTML & CSS

This might look overwhelming. But the style attributes with bold font are the only styles required to make it a drop-down.

If you look at the class .dropdown-content there are two things to notice. Firstly, the display: none is to keep it hidden initially and using the :hoverselector on the container it is switched back to display: block

Secondly, position: absolute places the dropdown content relative to the dropdown container which is positioned relatively. Its important to position the .dropdown container with position: relative else the dropdown content will not work as expected. See the execution below.

Live Demo

Check out the Project here: https://github.com/nktkarnany/dropdown-menu

If you liked my article, kindly share it in your network and leave us a comment. It really helps us out and inspires us. Follow us on Social Media and donate to malc0de if you can.

Recommended Read

  1. Windows 10 “Home Hub” to Make Cortana Rival Google Home
  2. Windows 10 Creators Update To Have A Built-in Book Store
  3. Free Server Simulator Software For Windows
  4. Top 15 must-know CLI commands for every Linux user.
  5. Must watch cyber security predictions for 2018
  6. 6 Key Benefits of Asp.NET for Enterprise Applications

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.