Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS Dropdowns



W3.CSS Dropdown Classes

W3.CSS provides the following dropdown classes:

Class Defines
w3-dropdown-hover A hoverable dropdown element
w3-dropdown-content The dropdown part to be displayed
w3-dropdown-click A clickable dropdown element

Dropdown Elements

The w3-dropdown-hover class defines a hoverable dropdown element.

The w3-dropdown-content class defines the dropdown content to be displayed.

Example

<div class="w3-dropdown-hover">
  <button class="w3-button">Hover Over Me!</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>

Try it Yourself »

Both the hoverable element and the dropdown content element can be any HTML element.

In the example above the hover element was a <button>, and the dropdown content a <div>.

In the next example the hover element is a <p>, and the dropdown content is a <span>:

Example

<p class="w3-dropdown-hover">Hover over me!
  <span class="w3-dropdown-content w3-green">Hello World!</span>
</p>

Try it Yourself »



Menu Dropdowns

The w3-dropdown-hover class is perfect for creating navigation bars with dropdown menues:

Example

<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <div class="w3-dropdown-hover">
    <button class="w3-button">Dropdown</button>
    <div class="w3-dropdown-content w3-bar-block w3-card-4">
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
  </div>
</div>
Try It Yourself »

Note: You will learn more about Navigation Bars later in this tutorial.


Clickable Dropdowns

The w3-dropdown-click class creates a clickable dropdown element.

With this class, the dropdown is opened by JavaScript:

Example

<div class="w3-dropdown-click">
  <button onclick="myFunction()" class="w3-button w3-black">Click Me!</button>
  <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>

<script>
function myFunction() {
  var x = document.getElementById("Demo");
  if (x.className.indexOf("w3-show") == -1) { 
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

Try it Yourself »


Image Dropdowns

Move the mouse over the image:

Monterosso

Norway

Example

<div class="w3-dropdown-hover">
  <img src="img_snowtops.jpg" alt="Norway" style="width:20%">
  <div class="w3-dropdown-content" style="width:300px">
    <img src="img_snowtops.jpg" alt="Norway" style="width:100%">
  </div>
</div>

Try it Yourself »


Card Dropdowns

Move the mouse over one of the cities below:

London
London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Tokyo
Tokyo

Tokyo is the capital city of Japan.

13 million inhabitants.

Example

<div class="w3-dropdown-hover">London
  <div class="w3-dropdown-content w3-card-4" style="width:250px">
    <img src="img_london.jpg" alt="London" style="width:100%">
    <div class="w3-container">
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the UK.</p>
    </div>
  </div>
</div>

Try it Yourself »


Animated Dropdown

Use any of the w3-animate-classes to fade, zoom or slide in the dropdown content:

Example

<div class="w3-dropdown-click">
  <button onclick="myFunction()" class="w3-button">Click Me</button>
  <div id="Demo" class="w3-dropdown-content w3-bar-block w3-animate-zoom">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>

Try it Yourself »


Right-aligned Dropdown

Use the w3-right class to float the dropdown to the right. Use CSS to position the dropdown content (right:0 will make the dropdown menu go from right to left instead of left to right):

Example

<div class="w3-dropdown-hover w3-right">
  <button class="w3-button">Dropdown</button>
  <div class="w3-dropdown-content w3-bar-block w3-border" style="right:0">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>

Try it Yourself »


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.