CSS Dropdowns 📋

Create beautiful, accessible, and interactive custom dropdown menus with modern CSS techniques and JavaScript enhancements.

Why Custom Dropdowns Matter

Custom dropdowns enhance user experience by providing consistent styling across browsers, better visual feedback, and improved accessibility. They allow for creative designs while maintaining functionality and user expectations.

🎨 Design Consistency

Uniform appearance across all browsers and platforms

♿ Accessibility

Keyboard navigation and screen reader support

📱 Better UX

Enhanced visual feedback and interaction patterns

Basic CSS Dropdowns

Key Concepts:

Use :hover or JavaScript for toggle functionality
Position dropdowns with position: absolute
Style with transitions for smooth animations
Implement proper focus states
Ensure accessibility with ARIA attributes

Basic Dropdowns Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic CSS Dropdowns</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1000px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 2.5rem;
    }
    
    .dropdown-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .dropdown-group {
      padding: 2rem;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    
    .dropdown-title {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
    }
    
    /* Basic Dropdown */
    .dropdown {
      position: relative;
      display: inline-block;
      width: 100%;
    }
    
    .dropdown-btn {
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px 16px;
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.3s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .dropdown-btn:hover {
      border-color: #3b82f6;
    }
    
    .dropdown-btn:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1000;
    }
    
    .dropdown:hover .dropdown-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .dropdown-item {
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.2s ease;
      border-bottom: 1px solid #f1f5f9;
    }
    
    .dropdown-item:last-child {
      border-bottom: none;
    }
    
    .dropdown-item:hover {
      background: #f8fafc;
    }
    
    /* Arrow Icon */
    .dropdown-arrow {
      transition: transform 0.3s ease;
    }
    
    .dropdown:hover .dropdown-arrow {
      transform: rotate(180deg);
    }
    
    /* Color Variants */
    .dropdown-primary .dropdown-btn {
      border-color: #3b82f6;
      background: #3b82f6;
      color: white;
    }
    
    .dropdown-success .dropdown-btn {
      border-color: #10b981;
      background: #10b981;
      color: white;
    }
    
    .dropdown-warning .dropdown-btn {
      border-color: #f59e0b;
      background: #f59e0b;
      color: white;
    }
    
    /* Sizes */
    .dropdown-sm .dropdown-btn {
      padding: 8px 12px;
      font-size: 0.875rem;
    }
    
    .dropdown-lg .dropdown-btn {
      padding: 16px 20px;
      font-size: 1.125rem;
    }
    
    /* Demo Section */
    .demo-section {
      background: #f8fafc;
      padding: 2rem;
      border-radius: 15px;
      margin: 2rem 0;
      border-left: 4px solid #667eea;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>📋 CSS Dropdowns</h1>
    
    <div class="demo-section">
      <h2>Basic Dropdown Menu</h2>
      <div class="code-example">
        /* Dropdown Structure */<br>
        &lt;div class="dropdown"&gt;<br>
        &nbsp;&nbsp;&lt;button class="dropdown-btn"&gt;Menu ▼&lt;/button&gt;<br>
        &nbsp;&nbsp;&lt;div class="dropdown-content"&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="dropdown-item"&gt;Option 1&lt;/div&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="dropdown-item"&gt;Option 2&lt;/div&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="dropdown-item"&gt;Option 3&lt;/div&gt;<br>
        &nbsp;&nbsp;&lt;/div&gt;<br>
        &lt;/div&gt;
      </div>
      
      <div class="dropdown-grid">
        <div class="dropdown-group">
          <div class="dropdown-title">Default Dropdown</div>
          <div class="dropdown">
            <button class="dropdown-btn">
              Select Option
              <span class="dropdown-arrow">▼</span>
            </button>
            <div class="dropdown-content">
              <div class="dropdown-item">Profile Settings</div>
              <div class="dropdown-item">Account Preferences</div>
              <div class="dropdown-item">Privacy Controls</div>
              <div class="dropdown-item">Help & Support</div>
              <div class="dropdown-item">Logout</div>
            </div>
          </div>
        </div>
        
        <div class="dropdown-group">
          <div class="dropdown-title">Color Variants</div>
          <div class="dropdown dropdown-primary">
            <button class="dropdown-btn">
              Primary Menu
              <span class="dropdown-arrow">▼</span>
            </button>
            <div class="dropdown-content">
              <div class="dropdown-item">New Project</div>
              <div class="dropdown-item">Open File</div>
              <div class="dropdown-item">Save Workspace</div>
            </div>
          </div>
          
          <div class="dropdown dropdown-success" style="margin-top: 1rem;">
            <button class="dropdown-btn">
              Success Menu
              <span class="dropdown-arrow">▼</span>
            </button>
            <div class="dropdown-content">
              <div class="dropdown-item">Completed Tasks</div>
              <div class="dropdown-item">Achievements</div>
              <div class="dropdown-item">Success Stories</div>
            </div>
          </div>
        </div>
        
        <div class="dropdown-group">
          <div class="dropdown-title">Size Variants</div>
          <div class="dropdown dropdown-sm">
            <button class="dropdown-btn">
              Small Dropdown
              <span class="dropdown-arrow">▼</span>
            </button>
            <div class="dropdown-content">
              <div class="dropdown-item">Compact Option 1</div>
              <div class="dropdown-item">Compact Option 2</div>
              <div class="dropdown-item">Compact Option 3</div>
            </div>
          </div>
          
          <div class="dropdown dropdown-lg" style="margin-top: 1rem;">
            <button class="dropdown-btn">
              Large Dropdown Menu
              <span class="dropdown-arrow">▼</span>
            </button>
            <div class="dropdown-content">
              <div class="dropdown-item">Extended Option One</div>
              <div class="dropdown-item">Extended Option Two</div>
              <div class="dropdown-item">Extended Option Three</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Dropdown with Icons</h2>
      <div class="code-example">
        /* Icon Dropdown Structure */<br>
        &lt;div class="dropdown-item"&gt;<br>
        &nbsp;&nbsp;&lt;span class="item-icon"&gt;📁&lt;/span&gt;<br>
        &nbsp;&nbsp;&lt;span class="item-text"&gt;Documents&lt;/span&gt;<br>
        &lt;/div&gt;
      </div>
      
      <div class="dropdown-grid">
        <div class="dropdown-group">
          <div class="dropdown-title">File Operations</div>
          <div class="dropdown">
            <button class="dropdown-btn">
              File Actions
              <span class="dropdown-arrow">▼</span>
            </button>
            <div class="dropdown-content">
              <div class="dropdown-item">
                <span style="margin-right: 8px;">📄</span>
                New File
              </div>
              <div class="dropdown-item">
                <span style="margin-right: 8px;">📁</span>
                Open Folder
              </div>
              <div class="dropdown-item">
                <span style="margin-right: 8px;">💾</span>
                Save File
              </div>
              <div class="dropdown-item">
                <span style="margin-right: 8px;">🖨️</span>
                Print Document
              </div>
              <div class="dropdown-item">
                <span style="margin-right: 8px;">📤</span>
                Export As...
              </div>
            </div>
          </div>
        </div>
        
        <div class="dropdown-group">
          <div class="dropdown-title">User Menu</div>
          <div class="dropdown">
            <button class="dropdown-btn">
              <span style="margin-right: 8px;">👤</span>
              John Doe
              <span class="dropdown-arrow">▼</span>
            </button>
            <div class="dropdown-content">
              <div class="dropdown-item">
                <span style="margin-right: 8px;">👤</span>
                My Profile
              </div>
              <div class="dropdown-item">
                <span style="margin-right: 8px;">⚙️</span>
                Settings
              </div>
              <div class="dropdown-item">
                <span style="margin-right: 8px;">🔔</span>
                Notifications
              </div>
              <div class="dropdown-item">
                <span style="margin-right: 8px;">🛡️</span>
                Privacy
              </div>
              <div class="dropdown-item">
                <span style="margin-right: 8px;">🚪</span>
                Sign Out
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Add click functionality to dropdown items
    const dropdownItems = document.querySelectorAll('.dropdown-item');
    
    dropdownItems.forEach(item => {
      item.addEventListener('click', function() {
        const dropdown = this.closest('.dropdown');
        const button = dropdown.querySelector('.dropdown-btn');
        const itemText = this.textContent.trim();
        
        // Update button text with selected option
        button.innerHTML = `${itemText} <span class="dropdown-arrow">▼</span>`;
        
        // Close dropdown
        dropdown.querySelector('.dropdown-content').style.opacity = '0';
        dropdown.querySelector('.dropdown-content').style.visibility = 'hidden';
        
        console.log(`Selected: ${itemText}`);
      });
    });
    
    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
      const dropdowns = document.querySelectorAll('.dropdown');
      
      dropdowns.forEach(dropdown => {
        if (!dropdown.contains(event.target)) {
          dropdown.querySelector('.dropdown-content').style.opacity = '0';
          dropdown.querySelector('.dropdown-content').style.visibility = 'hidden';
        }
      });
    });
  </script>
</body>
</html>

Advanced CSS Dropdowns

Visual Enhancements

Create engaging dropdowns with mega menus, animations, search functionality, and card-based layouts that improve user interaction.

Mega menus with columns

Animated transitions

Search and filter

Interactive Features

Implement searchable dropdowns, animated item transitions, and rich content displays that make navigation more intuitive.

Staggered animations

Real-time search

Rich content cards

Advanced Dropdowns Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced CSS Dropdowns</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 2.5rem;
    }
    
    .dropdown-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .dropdown-group {
      padding: 2rem;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    
    .dropdown-title {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
    }
    
    /* Mega Dropdown */
    .mega-dropdown {
      position: relative;
      display: inline-block;
      width: 100%;
    }
    
    .mega-dropdown-btn {
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px 16px;
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.3s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .mega-dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1000;
      padding: 1.5rem;
    }
    
    .mega-dropdown:hover .mega-dropdown-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .mega-columns {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
    
    .mega-column h4 {
      color: #2d3748;
      margin-bottom: 1rem;
      font-size: 1rem;
    }
    
    .mega-column ul {
      list-style: none;
    }
    
    .mega-column li {
      padding: 8px 0;
      cursor: pointer;
      transition: color 0.2s ease;
      border-bottom: 1px solid transparent;
    }
    
    .mega-column li:hover {
      color: #3b82f6;
      border-bottom-color: #3b82f6;
    }
    
    /* Animated Dropdown */
    .animated-dropdown {
      position: relative;
      display: inline-block;
      width: 100%;
    }
    
    .animated-dropdown-btn {
      background: linear-gradient(135deg, #667eea, #764ba2);
      border: none;
      border-radius: 8px;
      padding: 12px 16px;
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-size: 1rem;
      color: white;
      transition: all 0.3s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .animated-dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-20px) scale(0.95);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      z-index: 1000;
      overflow: hidden;
    }
    
    .animated-dropdown:hover .animated-dropdown-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }
    
    .animated-dropdown-item {
      padding: 12px 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      border-bottom: 1px solid #f1f5f9;
      transform: translateX(-20px);
      opacity: 0;
    }
    
    .animated-dropdown:hover .animated-dropdown-item {
      transform: translateX(0);
      opacity: 1;
    }
    
    .animated-dropdown:hover .animated-dropdown-item:nth-child(1) {
      transition-delay: 0.1s;
    }
    
    .animated-dropdown:hover .animated-dropdown-item:nth-child(2) {
      transition-delay: 0.2s;
    }
    
    .animated-dropdown:hover .animated-dropdown-item:nth-child(3) {
      transition-delay: 0.3s;
    }
    
    .animated-dropdown:hover .animated-dropdown-item:nth-child(4) {
      transition-delay: 0.4s;
    }
    
    .animated-dropdown-item:hover {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      transform: translateX(10px);
    }
    
    /* Search Dropdown */
    .search-dropdown {
      position: relative;
      display: inline-block;
      width: 100%;
    }
    
    .search-input {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      font-size: 1rem;
      transition: border-color 0.3s ease;
    }
    
    .search-input:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .search-dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      max-height: 200px;
      overflow-y: auto;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1000;
    }
    
    .search-dropdown:focus-within .search-dropdown-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .search-result {
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.2s ease;
      border-bottom: 1px solid #f1f5f9;
    }
    
    .search-result:last-child {
      border-bottom: none;
    }
    
    .search-result:hover {
      background: #f8fafc;
    }
    
    /* Card Dropdown */
    .card-dropdown {
      position: relative;
      display: inline-block;
      width: 100%;
    }
    
    .card-dropdown-btn {
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.3s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .card-dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1000;
      padding: 1rem;
    }
    
    .card-dropdown:hover .card-dropdown-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .card-option {
      display: flex;
      align-items: center;
      padding: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      border-radius: 8px;
      margin-bottom: 8px;
    }
    
    .card-option:last-child {
      margin-bottom: 0;
    }
    
    .card-option:hover {
      background: #f8fafc;
      transform: translateX(5px);
    }
    
    .card-icon {
      width: 32px;
      height: 32px;
      background: #3b82f6;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      margin-right: 12px;
      font-size: 0.875rem;
    }
    
    .card-text {
      flex: 1;
    }
    
    .card-title {
      font-weight: 600;
      margin-bottom: 2px;
    }
    
    .card-description {
      font-size: 0.875rem;
      color: #6b7280;
    }
    
    /* Demo Section */
    .demo-section {
      background: #f8fafc;
      padding: 2rem;
      border-radius: 15px;
      margin: 2rem 0;
      border-left: 4px solid #4facfe;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🚀 Advanced CSS Dropdowns</h1>
    
    <div class="demo-section">
      <h2>Mega Dropdown Menu</h2>
      <div class="code-example">
        /* Mega Dropdown Structure */<br>
        Multi-column layout<br>
        Categorized content<br>
        Rich media support
      </div>
      
      <div class="dropdown-grid">
        <div class="dropdown-group">
          <div class="dropdown-title">Navigation Mega Menu</div>
          <div class="mega-dropdown">
            <button class="mega-dropdown-btn">
              Products & Services
              <span class="dropdown-arrow">▼</span>
            </button>
            <div class="mega-dropdown-content">
              <div class="mega-columns">
                <div class="mega-column">
                  <h4>Web Development</h4>
                  <ul>
                    <li>Frontend Frameworks</li>
                    <li>Backend Solutions</li>
                    <li>API Development</li>
                    <li>Performance Optimization</li>
                  </ul>
                </div>
                <div class="mega-column">
                  <h4>Design Services</h4>
                  <ul>
                    <li>UI/UX Design</li>
                    <li>Brand Identity</li>
                    <li>Motion Graphics</li>
                    <li>Prototyping</li>
                  </ul>
                </div>
                <div class="mega-column">
                  <h4>Consulting</h4>
                  <ul>
                    <li>Technical Audit</li>
                    <li>Strategy Planning</li>
                    <li>Team Training</li>
                    <li>Code Review</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Animated Dropdowns</h2>
      <div class="code-example">
        /* Advanced Animations */<br>
        Staggered item animations<br>
        Smooth transitions<br>
        Transform effects
      </div>
      
      <div class="dropdown-grid">
        <div class="dropdown-group">
          <div class="dropdown-title">Animated Menu</div>
          <div class="animated-dropdown">
            <button class="animated-dropdown-btn">
              Animated Options
              <span class="dropdown-arrow">▼</span>
            </button>
            <div class="animated-dropdown-content">
              <div class="animated-dropdown-item">Creative Design</div>
              <div class="animated-dropdown-item">Web Development</div>
              <div class="animated-dropdown-item">Mobile Apps</div>
              <div class="animated-dropdown-item">Digital Marketing</div>
            </div>
          </div>
        </div>
        
        <div class="dropdown-group">
          <div class="dropdown-title">Search with Filter</div>
          <div class="search-dropdown">
            <input type="text" class="search-input" placeholder="Search products...">
            <div class="search-dropdown-content">
              <div class="search-result">Web Development Course</div>
              <div class="search-result">Mobile App Template</div>
              <div class="search-result">UI Design Kit</div>
              <div class="search-result">JavaScript Framework</div>
              <div class="search-result">CSS Animation Library</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Card Style Dropdowns</h2>
      <div class="code-example">
        /* Card-based Dropdown */<br>
        Enhanced visual design<br>
        Rich content support<br>
        Better user experience
      </div>
      
      <div class="dropdown-grid">
        <div class="dropdown-group">
          <div class="dropdown-title">Feature Selection</div>
          <div class="card-dropdown">
            <button class="card-dropdown-btn">
              Choose Plan Type
              <span class="dropdown-arrow">▼</span>
            </button>
            <div class="card-dropdown-content">
              <div class="card-option">
                <div class="card-icon">🚀</div>
                <div class="card-text">
                  <div class="card-title">Starter Plan</div>
                  <div class="card-description">Perfect for small projects</div>
                </div>
              </div>
              <div class="card-option">
                <div class="card-icon">💼</div>
                <div class="card-text">
                  <div class="card-title">Business Plan</div>
                  <div class="card-description">Ideal for growing teams</div>
                </div>
              </div>
              <div class="card-option">
                <div class="card-icon">🏢</div>
                <div class="card-text">
                  <div class="card-title">Enterprise Plan</div>
                  <div class="card-description">For large organizations</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Search functionality
    const searchInput = document.querySelector('.search-input');
    const searchResults = document.querySelectorAll('.search-result');
    
    searchInput.addEventListener('input', function() {
      const searchTerm = this.value.toLowerCase();
      
      searchResults.forEach(result => {
        const text = result.textContent.toLowerCase();
        if (text.includes(searchTerm)) {
          result.style.display = 'block';
        } else {
          result.style.display = 'none';
        }
      });
    });
    
    // Card dropdown interactions
    const cardOptions = document.querySelectorAll('.card-option');
    
    cardOptions.forEach(option => {
      option.addEventListener('click', function() {
        const cardTitle = this.querySelector('.card-title').textContent;
        const dropdown = this.closest('.card-dropdown');
        const button = dropdown.querySelector('.card-dropdown-btn');
        
        button.innerHTML = `${cardTitle} <span class="dropdown-arrow">▼</span>`;
        
        console.log(`Selected plan: ${cardTitle}`);
      });
    });
    
    // Mega dropdown interactions
    const megaItems = document.querySelectorAll('.mega-column li');
    
    megaItems.forEach(item => {
      item.addEventListener('click', function() {
        console.log(`Navigating to: ${this.textContent}`);
      });
    });
  </script>
</body>
</html>

Mobile-Optimized Dropdowns

Touch-Friendly Design

Mobile devices require larger touch targets, appropriate spacing, and interaction patterns that work well on touch screens with proper focus management.

min-height: 56px;

-webkit-tap-highlight-color: transparent;

touch-action: manipulation;

Mobile-Optimized Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobile-Optimized Dropdowns</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      min-height: 100vh;
      padding: 1rem;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 2rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 1.5rem;
      text-align: center;
      font-size: 1.8rem;
    }
    
    .dropdown-group {
      margin-bottom: 2rem;
      padding: 1.5rem;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    
    .dropdown-title {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 1rem;
      font-size: 1.1rem;
    }
    
    /* Mobile Dropdown */
    .mobile-dropdown {
      position: relative;
      display: block;
      width: 100%;
    }
    
    .mobile-dropdown-btn {
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.2s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 56px;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    
    .mobile-dropdown-btn:active {
      background: #f8fafc;
      transform: scale(0.98);
    }
    
    .mobile-dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      max-height: 0;
      overflow: hidden;
      transition: all 0.3s ease;
      z-index: 1000;
    }
    
    .mobile-dropdown.active .mobile-dropdown-content {
      max-height: 300px;
      overflow-y: auto;
    }
    
    .mobile-dropdown-item {
      padding: 16px;
      cursor: pointer;
      transition: background 0.2s ease;
      border-bottom: 1px solid #f1f5f9;
      min-height: 56px;
      display: flex;
      align-items: center;
      -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-dropdown-item:active {
      background: #f1f5f9;
    }
    
    .mobile-dropdown-item:last-child {
      border-bottom: none;
    }
    
    /* Bottom Sheet Dropdown */
    .bottomsheet-dropdown {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: white;
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
      transform: translateY(100%);
      transition: transform 0.3s ease;
      z-index: 1001;
      padding: 2rem 1.5rem;
      max-height: 80vh;
      overflow-y: auto;
    }
    
    .bottomsheet-dropdown.active {
      transform: translateY(0);
    }
    
    .bottomsheet-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .bottomsheet-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.2s ease;
    }
    
    .bottomsheet-close:active {
      background: #f1f5f9;
    }
    
    .bottomsheet-option {
      padding: 16px;
      cursor: pointer;
      transition: background 0.2s ease;
      border-radius: 12px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      -webkit-tap-highlight-color: transparent;
    }
    
    .bottomsheet-option:active {
      background: #f1f5f9;
    }
    
    .bottomsheet-option:last-child {
      margin-bottom: 0;
    }
    
    .bottomsheet-icon {
      width: 40px;
      height: 40px;
      background: #3b82f6;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      margin-right: 12px;
      font-size: 1.125rem;
    }
    
    /* Fullscreen Dropdown */
    .fullscreen-dropdown {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
      z-index: 1002;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      padding: 2rem 1.5rem;
      overflow-y: auto;
    }
    
    .fullscreen-dropdown.active {
      transform: translateY(0);
    }
    
    .fullscreen-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .fullscreen-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.2s ease;
    }
    
    .fullscreen-close:active {
      background: #f1f5f9;
    }
    
    .fullscreen-option {
      padding: 20px;
      cursor: pointer;
      transition: background 0.2s ease;
      border-radius: 12px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      border: 1px solid #f1f5f9;
      -webkit-tap-highlight-color: transparent;
    }
    
    .fullscreen-option:active {
      background: #f8fafc;
      transform: scale(0.98);
    }
    
    .fullscreen-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      margin-right: 16px;
      font-size: 1.25rem;
    }
    
    .fullscreen-text {
      flex: 1;
    }
    
    .fullscreen-title {
      font-weight: 600;
      margin-bottom: 4px;
      font-size: 1.125rem;
    }
    
    .fullscreen-description {
      color: #6b7280;
      font-size: 0.875rem;
    }
    
    /* Overlay */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    /* Demo Section */
    .demo-section {
      background: #f8fafc;
      padding: 1.5rem;
      border-radius: 12px;
      margin: 1.5rem 0;
      border-left: 4px solid #ff9a9e;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.8rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>📱 Mobile Dropdowns</h1>
    
    <div class="demo-section">
      <h2>Touch-Optimized Dropdown</h2>
      <div class="code-example">
        /* Mobile dropdown */<br>
        Large touch targets (56px+)<br>
        Smooth animations<br>
        Touch-friendly interactions
      </div>
      
      <div class="dropdown-group">
        <div class="dropdown-title">App Settings</div>
        <div class="mobile-dropdown">
          <button class="mobile-dropdown-btn">
            Select Theme
            <span class="dropdown-arrow">▼</span>
          </button>
          <div class="mobile-dropdown-content">
            <div class="mobile-dropdown-item">Light Theme</div>
            <div class="mobile-dropdown-item">Dark Theme</div>
            <div class="mobile-dropdown-item">Auto (System)</div>
            <div class="mobile-dropdown-item">High Contrast</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Bottom Sheet Menu</h2>
      <div class="code-example">
        /* Bottom sheet pattern */<br>
        Native mobile experience<br>
        Easy thumb reach<br>
        Smooth slide animations
      </div>
      
      <div class="dropdown-group">
        <div class="dropdown-title">Actions Menu</div>
        <button class="mobile-dropdown-btn" onclick="openBottomSheet()">
          Open Actions Menu
          <span class="dropdown-arrow">▼</span>
        </button>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Fullscreen Selection</h2>
      <div class="code-example">
        /* Fullscreen modal */<br>
        Immersive experience<br>
        Rich content display<br>
        Clear visual hierarchy
      </div>
      
      <div class="dropdown-group">
        <div class="dropdown-title">Category Selection</div>
        <button class="mobile-dropdown-btn" onclick="openFullscreen()">
          Choose Category
          <span class="dropdown-arrow">▼</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Bottom Sheet -->
  <div class="bottomsheet-dropdown" id="bottomSheet">
    <div class="bottomsheet-header">
      <h3>Choose Action</h3>
      <button class="bottomsheet-close" onclick="closeBottomSheet()">×</button>
    </div>
    
    <div class="bottomsheet-option">
      <div class="bottomsheet-icon">📷</div>
      <span>Take Photo</span>
    </div>
    
    <div class="bottomsheet-option">
      <div class="bottomsheet-icon">🖼️</div>
      <span>Choose from Gallery</span>
    </div>
    
    <div class="bottomsheet-option">
      <div class="bottomsheet-icon">📁</div>
      <span>Browse Files</span>
    </div>
    
    <div class="bottomsheet-option">
      <div class="bottomsheet-icon">📝</div>
      <span>Create Document</span>
    </div>
    
    <div class="bottomsheet-option">
      <div class="bottomsheet-icon">🎤</div>
      <span>Voice Recording</span>
    </div>
  </div>

  <!-- Fullscreen Dropdown -->
  <div class="fullscreen-dropdown" id="fullscreenDropdown">
    <div class="fullscreen-header">
      <h2>Select Category</h2>
      <button class="fullscreen-close" onclick="closeFullscreen()">×</button>
    </div>
    
    <div class="fullscreen-option">
      <div class="fullscreen-icon">💻</div>
      <div class="fullscreen-text">
        <div class="fullscreen-title">Technology</div>
        <div class="fullscreen-description">Computers, gadgets, and electronics</div>
      </div>
    </div>
    
    <div class="fullscreen-option">
      <div class="fullscreen-icon">🏠</div>
      <div class="fullscreen-text">
        <div class="fullscreen-title">Home & Garden</div>
        <div class="fullscreen-description">Furniture, decor, and appliances</div>
      </div>
    </div>
    
    <div class="fullscreen-option">
      <div class="fullscreen-icon">👕</div>
      <div class="fullscreen-text">
        <div class="fullscreen-title">Fashion</div>
        <div class="fullscreen-description">Clothing, accessories, and shoes</div>
      </div>
    </div>
    
    <div class="fullscreen-option">
      <div class="fullscreen-icon">🎮</div>
      <div class="fullscreen-text">
        <div class="fullscreen-title">Entertainment</div>
        <div class="fullscreen-description">Games, movies, and music</div>
      </div>
    </div>
    
    <div class="fullscreen-option">
      <div class="fullscreen-icon">🏃</div>
      <div class="fullscreen-text">
        <div class="fullscreen-title">Sports</div>
        <div class="fullscreen-description">Equipment and outdoor gear</div>
      </div>
    </div>
  </div>

  <!-- Overlay -->
  <div class="overlay" id="overlay" onclick="closeAll()"></div>

  <script>
    // Mobile dropdown functionality
    const mobileDropdowns = document.querySelectorAll('.mobile-dropdown');
    
    mobileDropdowns.forEach(dropdown => {
      const button = dropdown.querySelector('.mobile-dropdown-btn');
      
      button.addEventListener('click', function() {
        dropdown.classList.toggle('active');
      });
    });
    
    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
      mobileDropdowns.forEach(dropdown => {
        if (!dropdown.contains(event.target)) {
          dropdown.classList.remove('active');
        }
      });
    });
    
    // Bottom sheet functions
    function openBottomSheet() {
      document.getElementById('bottomSheet').classList.add('active');
      document.getElementById('overlay').classList.add('active');
    }
    
    function closeBottomSheet() {
      document.getElementById('bottomSheet').classList.remove('active');
      document.getElementById('overlay').classList.remove('active');
    }
    
    // Fullscreen functions
    function openFullscreen() {
      document.getElementById('fullscreenDropdown').classList.add('active');
      document.getElementById('overlay').classList.add('active');
    }
    
    function closeFullscreen() {
      document.getElementById('fullscreenDropdown').classList.remove('active');
      document.getElementById('overlay').classList.remove('active');
    }
    
    // Close all
    function closeAll() {
      closeBottomSheet();
      closeFullscreen();
    }
    
    // Bottom sheet option clicks
    const bottomSheetOptions = document.querySelectorAll('.bottomsheet-option');
    bottomSheetOptions.forEach(option => {
      option.addEventListener('click', function() {
        const action = this.textContent.trim();
        console.log(`Action selected: ${action}`);
        closeBottomSheet();
      });
    });
    
    // Fullscreen option clicks
    const fullscreenOptions = document.querySelectorAll('.fullscreen-option');
    fullscreenOptions.forEach(option => {
      option.addEventListener('click', function() {
        const category = this.querySelector('.fullscreen-title').textContent;
        console.log(`Category selected: ${category}`);
        closeFullscreen();
      });
    });
  </script>
</body>
</html>

Accessibility & Best Practices

🎯 Keyboard Navigation

Arrow keys, Enter, Escape, and Tab support

🌈 ARIA Attributes

Proper roles, states, and properties

📝 Focus Management

Focus trapping and logical tab order

Accessibility Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible CSS Dropdowns</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 2.5rem;
    }
    
    .dropdown-group {
      margin-bottom: 2rem;
      padding: 1.5rem;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    
    .dropdown-title {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 1rem;
      font-size: 1.1rem;
    }
    
    .accessibility-note {
      background: #e6fffa;
      border: 1px solid #81e6d9;
      border-radius: 8px;
      padding: 1rem;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
    
    .accessibility-note.error {
      background: #fed7d7;
      border-color: #feb2b2;
    }
    
    /* Accessible Dropdown */
    .acc-dropdown {
      position: relative;
      display: inline-block;
      width: 100%;
    }
    
    .acc-dropdown-btn {
      background: white;
      border: 2px solid #4b5563;
      border-radius: 8px;
      padding: 12px 16px;
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.3s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .acc-dropdown-btn:hover {
      background: #f8fafc;
    }
    
    .acc-dropdown-btn:focus {
      outline: 3px solid #3b82f6;
      outline-offset: 2px;
    }
    
    .acc-dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #4b5563;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1000;
    }
    
    .acc-dropdown-content.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .acc-dropdown-item {
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.2s ease;
      border-bottom: 1px solid #f1f5f9;
    }
    
    .acc-dropdown-item:last-child {
      border-bottom: none;
    }
    
    .acc-dropdown-item:hover,
    .acc-dropdown-item:focus {
      background: #f1f5f9;
      outline: none;
    }
    
    .acc-dropdown-item[aria-selected="true"] {
      background: #3b82f6;
      color: white;
    }
    
    /* High Contrast Support */
    @media (prefers-contrast: high) {
      .acc-dropdown-btn {
        border-width: 3px;
      }
      
      .acc-dropdown-content {
        border-width: 2px;
      }
    }
    
    /* Reduced Motion Support */
    @media (prefers-reduced-motion: reduce) {
      .acc-dropdown-content {
        transition: none;
      }
    }
    
    /* Screen Reader Only Text */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    
    /* Focus Management Demo */
    .focus-demo {
      background: #fef3c7;
      border: 1px solid #f59e0b;
      border-radius: 8px;
      padding: 1rem;
      margin: 1rem 0;
    }
    
    /* ARIA Examples */
    .aria-example {
      background: #f0f9ff;
      border: 1px solid #7dd3fc;
      border-radius: 8px;
      padding: 1rem;
      margin: 1rem 0;
    }
    
    /* Demo Section */
    .demo-section {
      background: #f8fafc;
      padding: 2rem;
      border-radius: 15px;
      margin: 2rem 0;
      border-left: 4px solid #a8edea;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>♿ Accessible Dropdowns</h1>
    
    <div class="demo-section">
      <h2>Keyboard Navigation & Focus</h2>
      <div class="code-example">
        /* Keyboard Support */<br>
        Tab navigation<br>
        Arrow key navigation<br>
        Enter/Space to select<br>
        Escape to close
      </div>
      
      <div class="accessibility-note">
        ✅ <strong>Good:</strong> Full keyboard support allows users to navigate dropdowns without a mouse.
      </div>
      
      <div class="dropdown-group">
        <div class="dropdown-title">Try navigating with keyboard:</div>
        <div class="acc-dropdown" id="keyboardDropdown">
          <button class="acc-dropdown-btn" aria-expanded="false" aria-haspopup="listbox">
            Select Option
            <span class="dropdown-arrow">▼</span>
          </button>
          <div class="acc-dropdown-content" role="listbox" aria-labelledby="keyboardDropdown">
            <div class="acc-dropdown-item" role="option" tabindex="0" aria-selected="false">First Option</div>
            <div class="acc-dropdown-item" role="option" tabindex="0" aria-selected="false">Second Option</div>
            <div class="acc-dropdown-item" role="option" tabindex="0" aria-selected="false">Third Option</div>
            <div class="acc-dropdown-item" role="option" tabindex="0" aria-selected="false">Fourth Option</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>ARIA Attributes & Semantics</h2>
      <div class="code-example">
        /* ARIA Implementation */<br>
        aria-expanded for state<br>
        aria-haspopup for functionality<br>
        role="listbox" for structure<br>
        aria-selected for selection
      </div>
      
      <div class="aria-example">
        <strong>ARIA Best Practices:</strong>
        <ul style="margin-top: 0.5rem; padding-left: 1.5rem;">
          <li>Use <code>aria-expanded</code> to indicate dropdown state</li>
          <li>Include <code>aria-haspopup</code> on trigger buttons</li>
          <li>Use appropriate roles like <code>listbox</code> and <code>option</code></li>
          <li>Manage <code>aria-selected</code> for current selection</li>
          <li>Provide clear labels and descriptions</li>
        </ul>
      </div>
      
      <div class="dropdown-group">
        <div class="dropdown-title">ARIA Enhanced Dropdown</div>
        <div class="acc-dropdown" id="ariaDropdown">
          <button class="acc-dropdown-btn" 
                  aria-expanded="false" 
                  aria-haspopup="listbox"
                  aria-labelledby="ariaLabel">
            <span id="ariaLabel">Choose Category</span>
            <span class="dropdown-arrow">▼</span>
          </button>
          <div class="acc-dropdown-content" role="listbox" aria-labelledby="ariaLabel">
            <div class="acc-dropdown-item" role="option" tabindex="0" aria-selected="true">Web Development</div>
            <div class="acc-dropdown-item" role="option" tabindex="0" aria-selected="false">Mobile Development</div>
            <div class="acc-dropdown-item" role="option" tabindex="0" aria-selected="false">UI/UX Design</div>
            <div class="acc-dropdown-item" role="option" tabindex="0" aria-selected="false">Data Science</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Screen Reader Compatibility</h2>
      <div class="code-example">
        /* Screen Reader Support */<br>
        Proper label association<br>
        State announcements<br>
        Role and property descriptions
      </div>
      
      <div class="accessibility-note">
        ✅ <strong>Good:</strong> Screen readers can properly announce dropdown states and options when implemented with semantic HTML and ARIA.
      </div>
      
      <div class="dropdown-group">
        <div class="dropdown-title">Screen Reader Friendly</div>
        
        <label for="native-select" class="dropdown-title">Native Select (Baseline):</label>
        <select id="native-select" style="width: 100%; padding: 12px; border: 2px solid #4b5563; border-radius: 8px;">
          <option value="1">Option One</option>
          <option value="2">Option Two</option>
          <option value="3">Option Three</option>
        </select>
        
        <div style="margin-top: 1.5rem;">
          <div class="acc-dropdown" id="srDropdown">
            <button class="acc-dropdown-btn" 
                    aria-expanded="false" 
                    aria-haspopup="listbox"
                    aria-describedby="srDescription">
              Custom Dropdown
              <span class="dropdown-arrow">▼</span>
            </button>
            <div id="srDescription" class="sr-only">
              Press arrow keys to navigate options, Enter to select, Escape to close
            </div>
            <div class="acc-dropdown-content" role="listbox">
              <div class="acc-dropdown-item" role="option" tabindex="0">Custom Option One</div>
              <div class="acc-dropdown-item" role="option" tabindex="0">Custom Option Two</div>
              <div class="acc-dropdown-item" role="option" tabindex="0">Custom Option Three</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Focus Management</h2>
      <div class="code-example">
        /* Focus Management */<br>
        Trap focus in dropdown<br>
        Return focus to trigger<br>
        Clear focus indicators<br>
        Logical tab order
      </div>
      
      <div class="focus-demo">
        <strong>Focus Trap Demo:</strong> When dropdown is open, focus cycles through options and returns to trigger when closed.
      </div>
      
      <div class="dropdown-group">
        <div class="dropdown-title">Focus Managed Dropdown</div>
        <div class="acc-dropdown" id="focusDropdown">
          <button class="acc-dropdown-btn" aria-expanded="false" aria-haspopup="listbox">
            Focus Demo
            <span class="dropdown-arrow">▼</span>
          </button>
          <div class="acc-dropdown-content" role="listbox">
            <div class="acc-dropdown-item" role="option" tabindex="0">First Focusable Item</div>
            <div class="acc-dropdown-item" role="option" tabindex="0">Second Focusable Item</div>
            <div class="acc-dropdown-item" role="option" tabindex="0">Third Focusable Item</div>
            <div class="acc-dropdown-item" role="option" tabindex="0">Fourth Focusable Item</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Accessible dropdown functionality
    const accDropdowns = document.querySelectorAll('.acc-dropdown');
    
    accDropdowns.forEach(dropdown => {
      const button = dropdown.querySelector('.acc-dropdown-btn');
      const content = dropdown.querySelector('.acc-dropdown-content');
      const items = dropdown.querySelectorAll('.acc-dropdown-item');
      let currentIndex = -1;
      
      // Toggle dropdown
      button.addEventListener('click', function() {
        const isExpanded = this.getAttribute('aria-expanded') === 'true';
        this.setAttribute('aria-expanded', !isExpanded);
        content.classList.toggle('show');
        
        if (!isExpanded) {
          // Set first item as selected when opening
          currentIndex = 0;
          updateSelection();
        }
      });
      
      // Keyboard navigation
      button.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          this.click();
        } else if (e.key === 'ArrowDown') {
          e.preventDefault();
          if (!content.classList.contains('show')) {
            this.click();
          }
          currentIndex = 0;
          updateSelection();
        }
      });
      
      // Item keyboard navigation
      items.forEach((item, index) => {
        item.addEventListener('keydown', function(e) {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            selectItem(this);
          } else if (e.key === 'ArrowDown') {
            e.preventDefault();
            currentIndex = (index + 1) % items.length;
            updateSelection();
          } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            currentIndex = (index - 1 + items.length) % items.length;
            updateSelection();
          } else if (e.key === 'Escape') {
            closeDropdown();
          }
        });
        
        item.addEventListener('click', function() {
          selectItem(this);
        });
      });
      
      function updateSelection() {
        items.forEach((item, index) => {
          item.setAttribute('aria-selected', index === currentIndex);
          if (index === currentIndex) {
            item.focus();
          }
        });
      }
      
      function selectItem(item) {
        const selectedText = item.textContent;
        button.innerHTML = `${selectedText} <span class="dropdown-arrow">▼</span>`;
        closeDropdown();
        console.log(`Selected: ${selectedText}`);
      }
      
      function closeDropdown() {
        button.setAttribute('aria-expanded', 'false');
        content.classList.remove('show');
        button.focus();
        currentIndex = -1;
      }
      
      // Close when clicking outside
      document.addEventListener('click', function(event) {
        if (!dropdown.contains(event.target)) {
          closeDropdown();
        }
      });
    });
  </script>
</body>
</html>

Best Practices & Common Pitfalls

✅ Do This

Use semantic HTML and ARIA attributes
Provide clear focus indicators
Ensure keyboard navigation works
Use appropriate sizes for touch devices
Test with screen readers
Close dropdowns when clicking outside

❌ Avoid This

Don't rely solely on hover for mobile
Avoid tiny touch targets
Don't forget escape key functionality
Avoid complex animations that cause motion sickness
Don't break native browser functionality
Avoid poor color contrast

🚀 Performance Tips

CSS Transitions

Use transform and opacity for better performance

Event Delegation

Use event delegation for better JavaScript performance

Reduced Motion

Respect prefers-reduced-motion preference

Efficient Selectors

Use specific CSS selectors for better performance

Ready to Create Amazing Dropdowns? 📋

Experiment with our comprehensive dropdown examples and create beautiful, accessible navigation menus that enhance your user experience.

< Previous Next >