Dropdowns JS Required

<div class="focus-dropdown">
  <button class="focus-btn focus-btn-primary focus-dropdown-toggle">
    Actions <i class="fa fa-chevron-down"></i>
  </button>
  <div class="focus-dropdown-menu" style="display: none;">
    <button class="focus-dropdown-item">
      <i class="fa fa-edit"></i> Edit
    </button>
    <button class="focus-dropdown-item">
      <i class="fa fa-copy"></i> Duplicate
    </button>
    <button class="focus-dropdown-item">
      <i class="fa fa-share"></i> Share
    </button>
    <div class="focus-dropdown-divider"></div>
    <button class="focus-dropdown-item">
      <i class="fa fa-trash"></i> Delete
    </button>
  </div>
</div>

<!-- Right Aligned -->
<div class="focus-dropdown">
  <button class="focus-btn focus-dropdown-toggle">Right Aligned</button>
  <div class="focus-dropdown-menu focus-dropdown-menu-right">
    <button class="focus-dropdown-item">Profile</button>
    <button class="focus-dropdown-item">Settings</button>
  </div>
</div>

<!-- Top Aligned -->
<div class="focus-dropdown">
  <button class="focus-btn focus-dropdown-toggle">Top Aligned</button>
  <div class="focus-dropdown-menu focus-dropdown-menu-top">
    <button class="focus-dropdown-item">Move Up</button>
    <button class="focus-dropdown-item">Move Down</button>
  </div>
</div>

<div class="focus-dropdown">
  <button class="focus-btn focus-dropdown-toggle">
    Account <i class="fa fa-chevron-down"></i>
  </button>
  <div class="focus-dropdown-menu">
    <div class="focus-dropdown-header">Profile</div>
    <button class="focus-dropdown-item">
      <i class="fa fa-user"></i> My Profile
    </button>
    <button class="focus-dropdown-item">
      <i class="fa fa-star"></i> Favorites
    </button>
    <div class="focus-dropdown-divider"></div>
    <div class="focus-dropdown-header">Settings</div>
    <button class="focus-dropdown-item">
      <i class="fa fa-cog"></i> Preferences
    </button>
  </div>
</div>

<div class="focus-dropdown-menu">
  <button class="focus-dropdown-item">New File</button>
  <button class="focus-dropdown-item">Open</button>
  <button class="focus-dropdown-item" disabled>Save (Disabled)</button>
  <button class="focus-dropdown-item">Print</button>
</div>

// Initialize dropdowns
document.querySelectorAll('.focus-dropdown').forEach(dropdown => {
  const toggle = dropdown.querySelector('.focus-dropdown-toggle');
  const menu = dropdown.querySelector('.focus-dropdown-menu');
  
  toggle.addEventListener('click', (e) => {
    e.stopPropagation();
    
    // Close other dropdowns
    document.querySelectorAll('.focus-dropdown-menu').forEach(m => {
      if (m !== menu) m.style.display = 'none';
    });
    
    // Toggle current dropdown
    menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
  });
  
  // Close dropdown when clicking an item
  menu.querySelectorAll('.focus-dropdown-item').forEach(item => {
    item.addEventListener('click', () => {
      menu.style.display = 'none';
    });
  });
});

// Close all dropdowns when clicking outside
document.addEventListener('click', () => {
  document.querySelectorAll('.focus-dropdown-menu').forEach(menu => {
    menu.style.display = 'none';
  });
});