W3CSS Dropdown

In the previous article, we saw how to create bars in W3CSS. In this article, we are going a step further and see how to create dropdowns using W3CSS. It is very easy to create W3CSS dropdown. You simply have to add w3-dropdown-hover class to the element. Now we want that when hover mouse on this element an element appears in the dropdown. To do so, add w3-dropdown-content class the element and wrap that element inside the parent element that contains a class “w3-dropdown-hover”. Now hovering your mouse over the parent element should make dropdown element appear beneath it.

Basic W3CSS Dropdown

To create a basic dropdown, create a div and add “w3-dropdown-hover” class to it. Inside the div, create a button. After the button, inside the same div, create a div with class w3-bar-block which makes this div a vertical bar. Add “w3-dropdown-content” class to the same div. This will make this div appear when mouse is hovered on its parent element. Inside the div, add w3-bar-items as you like. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-dropdown-hover">
  <button class="w3-button w3-blue w3-hover-blue">Categories</button>
  <div class="w3-dropdown-content w3-bar-block w3-border w3-yellow ">
    <a href="#" class="w3-bar-item w3-button w3-hover-red">HTML</a>
    <a href="#" class="w3-bar-item w3-button w3-hover-red">CSS</a>
    <a href="#" class="w3-bar-item w3-button w3-hover-red">JavaScript</a>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

Dropdown Menus

You can also create beautiful looking menus using the W3CSS dropdown classes. For instance, modify the last example by adding bar items to the outer div before adding a button. This will create a dropdown menu, with first two links, then a dropdown button. Clicking the dropdown button will show the vertical bar with different items. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-bar  w3-teal">
      <a href="#" class="w3-bar-item w3-button">Home</a>
      <a href="#" class="w3-bar-item w3-button">About</a>    
        <div class="w3-dropdown-hover">
          <button class="w3-button w3-blue w3-hover-blue">Tutorials</button>
          <div class="w3-dropdown-content w3-bar-block w3-border w3-yellow ">
            <a href="#" class="w3-bar-item w3-button w3-hover-red">HTML</a>
            <a href="#" class="w3-bar-item w3-button w3-hover-red">CSS</a>
            <a href="#" class="w3-bar-item w3-button w3-hover-red">JavaScript</a>
          </div>
        </div>
    </div>


</body>
    
</html>

Download the code Try the code

Dropdown Menu As Cards

you can also use dropdown menu as cards. Add w3-card-number to the element that is to be shown in the dropdown.
The element will take shape of a card. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-bar  w3-teal">
      <a href="#" class="w3-bar-item w3-button">Home</a>
      <a href="#" class="w3-bar-item w3-button">About</a>    
        <div class="w3-dropdown-hover">
          <button class="w3-button w3-blue w3-hover-blue">Tutorials</button>
          <div class="w3-dropdown-content w3-bar-block w3-yellow w3-card-8">
            <a href="#" class="w3-bar-item w3-button w3-hover-red">HTML</a>
            <a href="#" class="w3-bar-item w3-button w3-hover-red">CSS</a>
            <a href="#" class="w3-bar-item w3-button w3-hover-red">JavaScript</a>
          </div>
        </div>
    </div>


</body>
    
</html>

Download the code Try the code

Finally, you can also create right aligned dropdown elements by adding w3-right class to the parent div. Have a look at this code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-dropdown-hover w3-right">
  <button class="w3-button w3-blue w3-hover-blue">Categories</button>
  <div class="w3-dropdown-content w3-bar-block w3-border w3-yellow ">
    <a href="#" class="w3-bar-item w3-button w3-hover-red">HTML</a>
    <a href="#" class="w3-bar-item w3-button w3-hover-red">CSS</a>
    <a href="#" class="w3-bar-item w3-button w3-hover-red">JavaScript</a>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

<<< W3CSS BarsW3CSS Navigation >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .