CSS - Dropdowns

What is a Dropdown?

A dropdown is a user interface element that includes a list of options. It allows the user to choose one value from a list by hovering or clicking on a trigger element. It is typically used in navigation menus, forms, and other interactive components of a website.

Dropdown menus are created using HTML's Unordered List (<ul>) and list item (<li>) elements.

This chapter will cover the utilization of CSS for styling and arranging dropdown menu elements, controlling their appearance and behavior.

Create Dropdowns using CSS

Let us see a simple example of a CSS dropdowns with list of options. Try to click Edit & Run button to see the result of this code. When you hover over the "Select an Option" text, a dropdown menu appears with different options.

Example

<html>
<head>
<style>
   .dropdown {
      position: relative; display: inline-block; height:200px;
   }
   .dropdown-button {
      background-color: #40a944; padding: 10px 20px; border: none;
      cursor: pointer; color: #ffffff; margin: 0; width:155px;
   }
   .dropdown-menu {
      display: none; position: absolute; background-color: #fff;
      border: 1px solid #ccc; margin: 0; min-width: 160px;
      padding: 12px 16px; z-index: 1;
   }
   .dropdown-button, .dropdown:hover .dropdown-menu {
      display: block;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <span class="dropdown-button">Select an Option</span>
      <div class="dropdown-menu">
         <p>Option 1</p>
         <p>Option 2</p>
         <p>Option 3</p>
      </div>
   </div>
</body>
</html>

In the above example:

  • Use any HTML element such as <span>, or a <button> to open the dropdown content.

  • To create the dropdown content or menu, use a container element (like <div>)

  • Use CSS to wrap and position dropdown content correctly.

  • The .dropdown class uses position:relative. This property places dropdown menu right below the dropdown button (using position:absolute).

  • .dropdown-menu class holds the actual dropdown content. It is hidden by default, and will be displayed on hover.

  • The :hover selector shows the dropdown menu when the user moves the mouse over the dropdown button.

  • You can separately decorate your list options using CSS styling.

CSS Hoverable Dropdowns

A hoverable dropdown is a user interface element where a dropdown menu appears when a user hovers the cursor over the trigger element. The dropdown menu usually disappears when the user moves their cursor away from the trigger element.

Example

Let us see an example. This example uses anchor tags inside the dropdown box and style them to fit a styled dropdown button: 

<html>
<head>
<style>
   .dropdown {
      position: relative; display: inline-block; height:200px;
   }
   .dropdown-button {
      background-color: #40a944; padding: 15px; border: none;
      cursor: pointer; color: #ffffff; margin: 0; width: 162px;
   }
   .dropdown-menu {
      display: none; position: absolute; background-color: #fff;
      border: 1px solid #ccc; padding: 0; margin: 0;
      min-width: 160px; list-style-type: none;
   }
   .dropdown-menu li {
      padding: 10px; background-color: #15AD39;

   }
   .dropdown-menu li a {
      display: block; text-decoration: none; color: #ffffff;
   }
   .dropdown:hover .dropdown-menu {
      display: block;
   }
   .dropdown-menu li:hover {
      background-color: #82ea32;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <button class="dropdown-button">Select an Option</button>
      <ul class="dropdown-menu">
         <li><a href="#">Option 1</a></li>
         <li><a href="#">Option 2</a></li>
         <li><a href="#">Option 3</a></li>
      </ul>
   </div>
</body>
</html>

CSS Clickable Dropdowns

When you click on a dropdown, it expands to show the available options, and you can select one of these options by clicking on it.

Example

Let us see an example:

<html>
<head>
<style>
   .dropdown{
      height:200px;
   }
   .dropdown-button {
      background-color: #40a944; padding: 15px; border: none; cursor: pointer;
      color: #ffffff; margin: 0; width: 162px;
   }
   .dropdown-menu {
      display: none; position: absolute; background-color: #fff;
      border: 1px solid #ccc; margin: 0; padding: 0; min-width: 160px;
      list-style-type: none;
   }
   .dropdown-menu li {
      padding: 10px; background-color: #15AD39;
   }
   .dropdown-menu li a {
      display: block; text-decoration: none; color: #ffffff;
   }
   .dropdown-menu li:hover {
      background-color: #82ea32;
   }
   .show {
      display: block;
   }
</style>
<script>
   document.addEventListener('DOMContentLoaded', function () {
      const button = document.querySelector('.dropdown-button');
      const dropdownContent = document.querySelector('.dropdown-menu');

      button.addEventListener('click', function () {
         dropdownContent.classList.toggle('show');
      });
      document.addEventListener('click', function (event) {
         if (!event.target.matches('.dropdown-button') && dropdownContent.classList.contains('show')) {
            dropdownContent.classList.remove('show');
         }
      });
   });
</script>
</head>
<body>
   <div class="dropdown">
      <button class="dropdown-button">Select an Option</button>
      <ul class="dropdown-menu">
         <li><a href="#">Option 1</a></li>
         <li><a href="#">Option 2</a></li>
         <li><a href="#">Option 3</a></li>
      </ul>
   </div>
</body>
</html>

CSS Dropdown Menu - Right-aligned

You can place a dropdown menu on the right side of the screen by applying a float: right style to the <div> that contains the dropdown menu. This arrangement shifts the menu to the right-hand side of the screen.

Example

Let us see an example:

<html>
<head>
<style>
   .dropdown {
      position: relative; display: inline-block; float: right; height:200px;
   }
   .dropdown-button {
      background-color: #40a944; padding: 15px; border: none;
      cursor: pointer; color: #ffffff; margin: 0; width: 162px;
   }
   .dropdown-menu {
      display: none; position: absolute; background-color: #fff;
      border: 1px solid #ccc; padding: 0; margin: 0;
      min-width: 160px; list-style-type: none;
   }
   .dropdown-menu li {
      padding: 10px; background-color: #15AD39;

   }
   .dropdown-menu li a {
      display: block; text-decoration: none; color: #ffffff;
   }
   .dropdown:hover .dropdown-menu {
      display: block;
   }
   .dropdown-menu li:hover {
      background-color: #82ea32;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <button class="dropdown-button">Select an Option</button>
      <ul class="dropdown-menu">
         <li><a href="#">Option 1</a></li>
         <li><a href="#">Option 2</a></li>
         <li><a href="#">Option 3</a></li>
      </ul>
   </div>
</body>
</html>

CSS Dropdown Menu - Left-aligned

You can achieve a left-aligned dropdown menu by adding the float: left style to the <div> containing the dropdown menu. This arrangement shifts the menu to the leftmost part of the screen.

Example

Let us see an example:

<html>
<head>
<style>
   .dropdown {
      position: relative; display: inline-block; float: left; height:200px;
   }
   .dropdown-button {
      background-color: #40a944; padding: 15px; border: none;
      cursor: pointer; color: #ffffff; margin: 0; width: 162px;
   }
   .dropdown-menu {
      display: none; position: absolute; background-color: #fff;
      border: 1px solid #ccc; padding: 0; margin: 0; min-width: 160px;
      list-style-type: none;
   }
   .dropdown-menu li {
      padding: 10px; background-color: #15AD39;

   }
   .dropdown-menu li a {
      display: block; text-decoration: none; color: #ffffff;
   }
   .dropdown:hover .dropdown-menu {
      display: block;
   }
   .dropdown-menu li:hover {
      background-color: #82ea32;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <button class="dropdown-button">Select an Option</button>
      <ul class="dropdown-menu">
         <li><a href="#">Option 1</a></li>
         <li><a href="#">Option 2</a></li>
         <li><a href="#">Option 3</a></li>
      </ul>
   </div>
</body>
</html>

CSS Dropdown Menu with Images

You can enhance the dropdown by including images along with the textual options. When you hover over small image or menu button, a larger size image appears along with a description.

Example

Let us see an example:

<html>
<head>
<style>
   .dropdown {
      position: relative; display: inline-block;height:200px;
   }
   .dropdown-img-menu {
      display: none; position: absolute;background-color: #fff;border: 1px solid #ccc;
   }
   .dropdown:hover .dropdown-img-menu {
      display: block;
   }
   .img-descripition {
      padding: 15px; background-color: rgb(38, 222, 53);text-align: center;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <img src="images/red-flower.jpg" alt="Red Flower" width="100" height="50">
      <div class="dropdown-img-menu">
         <div class="img-descripition">Beautiful Red Flower</div>
         <img src="images/red-flower.jpg" alt="Red Flower" width="200" height="150">
      </div>
   </div>
</body>
</html>

CSS Dropdown Menu - Navbar

A dropdown navbar is commonly found in website navigation menus. It consists of a horizontal bar that contains a list of links. When users hover over or click on a specific link, a dropdown menu appears, display additional navigation options or content related to the selected link.

Now we will apply our dropdown menu knowledge to create a beautiful navigation bar using CSS.

Example

Let us see an example:

<html>
<head>
<style>
   .dropdown {
      height:200px;
   }
   ul {
      list-style-type: none; margin: 0; padding: 0; overflow: hidden;
      background-color: #40a944;
   }
   li {
      float: left;
   }
   li a, .dropdown-option {
      display: inline-block; color: white; text-align: center; padding: 14px 16px;
      text-decoration: none; z-index: 99;
   }
   li a:hover,.dropdown:hover .dropdown-option {
      background-color: #82ea32;
   }

   li.dropdown {
      display: inline-block;
   }
   .dropdown-menu {
      display: none; position: absolute; min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      min-width: 160px; background-color: #f9f9f9; z-index: 1;
   }
   .dropdown-menu a {
      color: black; text-decoration: none; display: block; text-align: left;
   }
   .dropdown-menu a:hover {
      background-color: #82ea32;
   }
   .dropdown:hover .dropdown-menu {
      display: block;
   }
</style>
</head>
<body>
   <ul>
      <li><a href="#">Tutorialspoints</a></li>
      <li><a href="#">Home</a></li>
      <li class="dropdown">
         <a href="#" class="dropdown-option">Articles</a>
         <div class="dropdown-menu">
         <a href="#">HTML</a>
         <a href="#">CSS</a>
         <a href="#">Bootstrap</a>
         </div>
      </li>
   </ul>
   <h2>Dropdown Menu inside a Navigation Bar</h2>
   <p>Hover over the "Articles" link to see the dropdown menu.</p>
</body>
</html>
Advertisements