W3.CSS — Dropdowns

Basic Dropdown

<div class="w3-dropdown-hover">
    <button class="w3-button w3-blue">Dropdown</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>

Dropdown Styles

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

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

Dropdown Examples

<!-- Navigation with dropdown -->
<div class="w3-bar w3-black">
    <a href="#" class="w3-bar-item w3-button">Home</a>
    <div class="w3-dropdown-hover">
        <button class="w3-button w3-black">Services ▾</button>
        <div class="w3-dropdown-content w3-bar-block w3-border">
            <a href="#" class="w3-bar-item w3-button">Web Design</a>
            <a href="#" class="w3-bar-item w3-button">SEO</a>
            <a href="#" class="w3-bar-item w3-button">Marketing</a>
        </div>
    </div>
    <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

<!-- User menu dropdown -->
<div class="w3-dropdown-hover w3-right">
    <button class="w3-button w3-blue">User Menu ▾</button>
    <div class="w3-dropdown-content w3-bar-block w3-border">
        <a href="#" class="w3-bar-item w3-button">Profile</a>
        <a href="#" class="w3-bar-item w3-button">Settings</a>
        <a href="#" class="w3-bar-item w3-button">Logout</a>
    </div>
</div>

Dropdown Right

<div class="w3-dropdown-hover w3-right">
    <button class="w3-button w3-purple">Right Dropdown ▾</button>
    <div class="w3-dropdown-content w3-bar-block w3-border">
        <a href="#" class="w3-bar-item w3-button">Option 1</a>
        <a href="#" class="w3-bar-item w3-button">Option 2</a>
    </div>
</div>

Mini Practice

Create HTML code that:

1. Creates a basic dropdown menu
2. Adds a dropdown with hover effect
3. Creates a navigation with dropdowns
4. Uses a user menu dropdown

Up Next

Next: Learn about W3.CSS Modals.