CSS Dropdown

CSS Dropdown menus are used to hide a predefined list within a button.

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element.

Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it.

Wrap a <div> element around the elements to position the dropdown content correctly with CSS.

CSS) The .dropdown class uses position:relative, which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute).

The .dropdown-content class holds the actual dropdown content. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the CSS box-shadow property to make the dropdown menu look like a “card”.

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

CSS Dropdown menu

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">hello</a>
    <a href="#">Hey</a>
    <a href="#">Hi</a>
  </div>
</div>

CSS Dropdown image

Lets see how to add an image and other content inside the dropdown box.

<div class="dropdown">
  <img src="media/flower.jpeg" alt="Cinque Terre" width="100" height="50">
  <div class="dropdown-content">
  <img src="media/flower.jpeg" alt="Cinque Terre" width="300" height="200">
  <div class="desc">Beautiful Cinque Terre</div>
  </div>
</div>

CSS Dropdown Navigation bar

This is how we add a dropdown menu in navigation bar

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Hello</a>
      <a href="#">Hey</a>
      <a href="#">Hi</a>
    </div>
  </li>
</ul>