How to Create a CSS Dropdown Menu On Click

CSS dropdown menu on click is an example of pure CSS. In most cases, javascript is used to perform this action. If you are searching for a dropdown on click with pure css then this post is very helpful for you. In this article, we will learn the best method of drop down on click without javascript and jquery and also learn about How to make drop down menu hover effect.

What is a Dropdown Menu and Why Use It?

A dropdown menu, also known as a pull-down menu, is a list that appears when users interact with a button or a designated area on the screen. This interaction can be a click or a hover action. Dropdown menus are useful for conserving space on the webpage and keeping the interface clean and organized. They are often used for navigation menus, form inputs, and any situation where you need to present multiple options without overwhelming the user.

Is it Possible To Show a Dropdown Onclick Only Using CSS?

Yes, it is indeed possible to create a dropdown menu that appears on click using only CSS, without any JavaScript or jQuery. The trick lies in using a hidden checkbox and the :checked pseudo-class selector in CSS.

When the checkbox is checked, we can use CSS to change the display property of the dropdown menu to block, making it visible. The checkbox is linked to a label, which acts as the button for our dropdown menu. When the label is clicked, it checks or unchecks the checkbox, showing or hiding the dropdown menu.

How To Create a Dropdown Menu On Click?

First, I added an <input> element with the type set to “checkbox“. This will serve as the trigger for showing and hiding the dropdown menu. I gave it an id of “check01” so that I can link it to a <label> element and I created a <label> element with the for attribute set to “check01”, matching the id of the checkbox. This label will act as the button for our dropdown menu. When this label is clicked, it will check or uncheck the checkbox.

Then, I created an unordered list (<ul>). This will be our dropdown menu. Inside the list, I added two list items (<li>) each containing a link (<a>). These will be the options in our dropdown menu.

 <input id="check01" type="checkbox" name="menu" />  
 <label for="check01">Dropdown...</label>  
  <ul class="submenu">  
      <li><a href="#">First Item</a></li>  
      <li><a href="#">Second Item</a></li>  
   </ul>

Output:

Now start our designing part, First I styled submenu. I set the display property of the checkbox and the dropdown menu to “none”. This hides them initially you can see the output image. I also added some other styles like list-style, text-decoration, font-weight, and margin-top.

input, ul.submenu {  
  display: none;  
  list-style:none;  
  text-decoration: none;  
  font-weight: bolder;  
  margin-top: 15px;  
}

Output:

Next, I styled the label to make it look like a button. I set its position to “relative”, display to “block”, and cursor to “pointer”. I also gave it a background color, width, padding, and font weight.

label {  
  position: relative;  
  display: block;  
  cursor: pointer;  
  background: black;  
  width: 100px;  
  color: white;  
  padding: 20px;  
  font-weight: bolder;  
}

Finally, I added a rule to show the dropdown menu when the checkbox is checked. I used the :checked pseudo-class to select the checkbox when it’s checked, and the ~ sibling combinator to select the dropdown menu that’s a sibling of the checkbox. I set the display of the dropdown menu to “block” to show it.

 /*show the submenu when input is checked*/  
 input:checked~ul.submenu {  
  display: block; }

Output:

How to Create a CSS Dropdown Menu On Hover?

In the first part of this post, we learned how to create an on-click dropdown menu using pure CSS. Now, let’s take it a step further and create an animated dropdown menu that appears on hover. This technique can provide a smoother user experience and add a professional touch to your website.

To create a dropdown menu that appears on hover, we’ll still use HTML and CSS, but the approach will be slightly different. Instead of using a hidden checkbox to trigger the dropdown, we’ll use the :hover pseudo-class selector in CSS. This selector matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It can be used on all elements, not only on links.

Step By Step Guidance

First, I created a <nav> element. This semantic HTML element indicates a section of a page whose purpose is to provide navigation links. Inside this, I created an unordered list (<ul>). This list will contain our main navigation items. Each navigation item is a list item (<li>) containing a link (<a>). For the “News” navigation item, I added a class of “dropdown” and a nested unordered list to create a dropdown menu.

<nav>
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
  <a href="#">News</a>
  <ul class="dropdown-content">
    <li><a href="#">Trending News</a></li>
    <li><a href="#">Business News</a></li>
    <li><a href="#">Entertainment</a></li>
  </ul>
</li>
</ul>
</nav>

Output:

In CSS, First I styled the .navbar class to remove list styles, add background, and display its children in a row using flexbox. I also used justify-content: space-around; to distribute the available space evenly between the navigation items.

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  display: flex;
  justify-content: space-around;
}

Next, I styled the links in the navbar to look like typical navbar items. I also applied these styles to the links in the dropdown menu.

.navbar li a, .dropdown-content a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

I used the .dropdown class to group each dropdown menu and its button together. The .dropdown-content class is used to style the dropdown menu. It’s initially hidden with display: none, but is shown when the .dropdown is hovered over with display: block.

.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
   text-decoration: none;
  color: white;
  text-align: center !important;
  margin-left: -40px;
  
}

.dropdown:hover .dropdown-content {
  display: block;
}

Output:

Finally, I added a media query to make the navbar responsive. When the screen width is 600px or less, the navbar items stack vertically instead of horizontally.

@media screen and (max-width: 600px) {
  .navbar {
    flex-direction: column;
  }
}

We certainly hope that you’ve found this post both insightful and practical. We’ve strived to deliver detailed, user-friendly content that will assist you in mastering this tutorial. Should you have any further questions, curiosities, or if there’s anything you’re unsure about, please don’t hesitate to drop a comment. Your engagement is extremely valuable to us and our community. We promise to read every single comment and respond as soon as we can. It’s our aim to make sure you’re never left hanging with a question, as we’re more than eager to assist you in broadening your knowledge.