Dropdowns in W3.CSS are created using the w3-dropdown
and w3-dropdown-content
classes.
<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>
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>