W3.CSS Dropdowns

In the next example the hover element is a

, and the dropdown content is a :

Example

Hover over me!
  Hello World!

»

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

Home Link 1
 Dropdown
Link 1 Link 2 Link 3
Example

»
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:

Click Me
Link 1 Link 2 Link 3
Example

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”, “”);
    }
}

»

Image Dropdowns
Move the mouse over the image:

Example

 
 

   
 

»

Card Dropdowns
Move the mouse over one of the cities below:

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 is the capital city of Japan.

13 million inhabitants.

Example

London
 

   
   

     

London is the capital city of England.

     

It is the most populous city in the UK.

   

 

»

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

Click Me
Link 1 Link 2 Link 3
Example

»

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):

Hover Over Me
Link 1 Link 2 Link 3
Example

»

❮ Previous Next ❯