CSS Interactive Floating Tooltip Menu

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="menu-wrap">
  <button class="menu-btn">👤 Profile Menu</button>
  <div class="menu-dropdown">
    <a href="#" class="menu-item">⚙️ Account</a>
    <a href="#" class="menu-item">🎨 Appearance</a>
    <a href="#" class="menu-item">🔔 Notifications</a>
  </div>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.menu-wrap { position: relative; display: inline-block; font-family: system-ui, sans-serif; }
.menu-btn { padding: 10px 18px; background: #18181b; color: #f4f4f5; border: 1px solid #27272a; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.2s; }
.menu-btn:hover { background: #27272a; }
.menu-dropdown { position: absolute; top: 110%; left: 0; width: 160px; background: #18181b; border: 1px solid #27272a; border-radius: 10px; padding: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.menu-wrap:focus-within .menu-dropdown, .menu-wrap:hover .menu-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.menu-item { display: block; padding: 8px 12px; color: #a1a1aa; font-size: 12px; text-decoration: none; border-radius: 6px; transition: all 0.15s; }
.menu-item:hover { background: #3b82f6; color: #ffffff; }