dropdown

W3.CSS Dropdowns

W3.CSS Dropdowns

Dropdowns in W3.CSS are created using the w3-dropdown and w3-dropdown-content classes.

Basic Dropdown Example

<div class="w3-dropdown-hover">
  <button class="w3-button w3-blue">Dropdown</button>
  <div class="w3-dropdown-content w3-bar-block w3-card">
    <a href="#" class="w3-bar-item w3-button">Option 1</a>
    <a href="#" class="w3-bar-item w3-button">Option 2</a>
    <a href="#" class="w3-bar-item w3-button">Option 3</a>
  </div>
</div>
    

Positioned Dropdown

Add w3-right or w3-left to control the dropdown position:

<div class="w3-dropdown-hover w3-right">
  <button class="w3-button w3-green">Dropdown</button>
  <div class="w3-dropdown-content w3-bar-block w3-card">
    <a href="#" class="w3-bar-item w3-button">Option A</a>
    <a href="#" class="w3-bar-item w3-button">Option B</a>
  </div>
</div>