Start learning

Dropdown buttons

You can freely copy the code or you can use our free live HTML editor to modify the code according to your specific needs.


HTML Simple Dropdown buttons

<div class="dropdown dropdown1">
    <button class="dropdown-button">Dropdown 1</button>
    <div class="dropdown-content">
      <a href="#">Option 1</a>
      <a href="#">Option 2</a>
      <a href="#">Option 3</a>
    </div>
  </div>

<div class="dropdown dropdown2">
    <button class="dropdown-button">Dropdown 2</button>
    <div class="dropdown-content">
      <a href="#">Option A</a>
      <a href="#">Option B</a>
      <a href="#">Option C</a>
    </div>
  </div>

<div class="dropdown dropdown3">
    <button class="dropdown-button">Dropdown 3</button>
    <div class="dropdown-content">
      <a href="#">Choice X</a>
      <a href="#">Choice Y</a>
      <a href="#">Choice Z</a>
    </div>
  </div>

<div class="dropdown dropdown4">
    <button class="dropdown-button">Dropdown 4</button>
    <div class="dropdown-content">
      <a href="#">Item Alpha</a>
      <a href="#">Item Beta</a>
      <a href="#">Item Gamma</a>
    </div>
  </div>

.dropdown {
      position: relative;
      display: inline-block;
      margin: 10px;
    }

    .dropdown-button {
      padding: 10px 20px;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      border-radius: 5px;
    }

    .dropdown-content a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
    }

    .dropdown-content a:hover {
      background-color: #ecf0f1;
    }

    /* Unique Dropdown Styles */
    .dropdown1 .dropdown-button {
      background-color: #2ecc71;
      color: #fff;
    }

    .dropdown1 .dropdown-content {
      background-color: #2ecc71;
      left: 0;
    }

    .dropdown2 .dropdown-button {
      background-color: #e74c3c;
      color: #fff;
    }

    .dropdown2 .dropdown-content {
      background-color: #e74c3c;
      right: 0;
    }

    .dropdown3 .dropdown-button {
      background-color: #f39c12;
      color: #fff;
      border-radius: 0;
    }

    .dropdown3 .dropdown-content {
      background-color: #f39c12;
      width:100%;
      border-radius: 0;
    }

    .dropdown4 .dropdown-button {
      background-color: #9b59b6;
      color: #fff;
    }

    .dropdown4 .dropdown-content {
      background-color: #9b59b6;
      left:10px;
    }

    /* Show dropdown on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }

Preview