Apple Liquid Glass Dropdown

<!-- SVG Filter for Glass Distortion -->
<svg style="display: none">
  <filter id="glass-distortion">
    <feTurbulence type="turbulence" baseFrequency="0.008" numOctaves="2" result="noise" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="77" />
  </filter>
</svg>

<div class="glass-dropdown-list">
  <!-- Item 1 -->
  <div class="glass-dropdown">
    <input type="checkbox" id="dropdown1" class="dropdown-toggle">
    <label for="dropdown1" class="dropdown-header">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <span>Features</span>
        <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M19 9l-7 7-7-7"/>
        </svg>
      </div>
    </label>
    <div class="dropdown-content">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <ul>
          <li>Modern Design</li>
          <li>Smooth Animations</li>
          <li>Pure CSS</li>
          <li>Responsive Layout</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Item 2 -->
  <div class="glass-dropdown">
    <input type="checkbox" id="dropdown2" class="dropdown-toggle">
    <label for="dropdown2" class="dropdown-header">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <span>Documentation</span>
        <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M19 9l-7 7-7-7"/>
        </svg>
      </div>
    </label>
    <div class="dropdown-content">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <p>This is a pure CSS implementation of a glass-style dropdown/accordion. No JavaScript required!</p>
      </div>
    </div>
  </div>

  <!-- Item 3 -->
  <div class="glass-dropdown">
    <input type="checkbox" id="dropdown3" class="dropdown-toggle">
    <label for="dropdown3" class="dropdown-header">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <span>Support</span>
        <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M19 9l-7 7-7-7"/>
        </svg>
      </div>
    </label>
    <div class="dropdown-content">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <p>Need help? Contact our support team for assistance.</p>
      </div>
    </div>
  </div>
</div>

/* Glass Dropdown List Container */
.glass-dropdown-list {
  --bg-color: rgba(255, 255, 255, 0.25);
  --highlight: rgba(255, 255, 255, 0.75);
  --text: #ffffff;
  
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 400px;
}

/* Glass Dropdown Item */
.glass-dropdown {
  position: relative;
}

/* Hide checkbox but keep it accessible */
.dropdown-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Dropdown Header */
.dropdown-header {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.glass-filter,
.glass-overlay,
.glass-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.glass-filter {
  z-index: 1;
  backdrop-filter: blur(4px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.15);
}

.glass-overlay {
  z-index: 2;
  background: var(--bg-color);
}

.glass-specular {
  z-index: 3;
  box-shadow: inset 1px 1px 1px var(--highlight);
}

.glass-content {
  position: relative;
  z-index: 4;
  padding: 16px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dropdown Arrow */
.dropdown-arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

/* Dropdown Content */
.dropdown-content {
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  border-radius: 12px;
  margin-top: 8px;
}

.dropdown-content .glass-content {
  padding: 0 16px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

/* Dropdown Open State */
.dropdown-toggle:checked ~ .dropdown-header .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-toggle:checked ~ .dropdown-content {
  max-height: 200px;
}

.dropdown-toggle:checked ~ .dropdown-content .glass-content {
  padding: 16px;
  opacity: 1;
  transform: translateY(0);
}

/* Content Styling */
.dropdown-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-content li {
  margin: 8px 0;
}

/* Hover Effects */
.dropdown-header:hover .glass-overlay {
  background: rgba(255, 255, 255, 0.3);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .glass-dropdown-list {
    --bg-color: rgba(0, 0, 0, 0.25);
    --highlight: rgba(255, 255, 255, 0.15);
  }
}