diff --git a/static/app.js b/static/app.js
index 9906389..74a1acd 100644
--- a/static/app.js
+++ b/static/app.js
@@ -193,10 +193,33 @@ window.onload = () => {
     document.addEventListener('DOMContentLoaded', () => {
         const showAll = document.getElementById('show-all-matches');
         const showFuture = document.getElementById('show-future-matches');
-        if (showAll) showAll.onclick = () => { matchViewMode = 'all'; renderTable(); };
-        if (showFuture) showFuture.onclick = () => { matchViewMode = 'future'; renderTable(); };
-        // Clicking the menu resets to default
+        const dropdown = document.querySelector('.menu-bar .dropdown');
+        const dropdownContent = document.getElementById('show-menu-dropdown');
         const showMenuBtn = document.getElementById('show-menu-btn');
-        if (showMenuBtn) showMenuBtn.onclick = () => { matchViewMode = 'fromLast'; renderTable(); };
+        let menuOpen = false;
+
+        function openMenu() {
+            dropdownContent.style.opacity = '1';
+            dropdownContent.style.visibility = 'visible';
+            dropdownContent.style.pointerEvents = 'auto';
+            showMenuBtn.setAttribute('aria-expanded', 'true');
+            menuOpen = true;
+        }
+        function closeMenu() {
+            dropdownContent.style.opacity = '';
+            dropdownContent.style.visibility = '';
+            dropdownContent.style.pointerEvents = '';
+            showMenuBtn.setAttribute('aria-expanded', 'false');
+            menuOpen = false;
+        }
+
+        if (dropdown && dropdownContent && showMenuBtn) {
+            dropdown.addEventListener('mouseenter', openMenu);
+            dropdown.addEventListener('mouseleave', closeMenu);
+            showMenuBtn.addEventListener('focus', openMenu);
+            showMenuBtn.addEventListener('blur', closeMenu);
+        }
+        if (showAll) showAll.onclick = () => { matchViewMode = 'all'; renderTable(); closeMenu(); };
+        if (showFuture) showFuture.onclick = () => { matchViewMode = 'future'; renderTable(); closeMenu(); };
     });
 };
diff --git a/templates/index.html b/templates/index.html
index 76243cf..706a499 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -51,6 +51,44 @@
             color: #DFD0B8;
         }
         .name-col { width: 140px; min-width: 100px; max-width: 180px; }
+        .menu-bar .dropdown-content {
+            opacity: 0;
+            visibility: hidden;
+            pointer-events: none;
+            transition: opacity 0.15s;
+            display: block;
+            position: absolute;
+            left: 0;
+            top: 100%;
+            background: #393E46;
+            min-width: 170px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            border-radius: 4px;
+            z-index: 10;
+        }
+        .menu-bar .dropdown:hover .dropdown-content,
+        .menu-bar .dropdown:focus-within .dropdown-content,
+        .menu-bar .dropdown .dropdown-content:focus,
+        .menu-bar .dropdown .dropdown-content:active {
+            opacity: 1;
+            visibility: visible;
+            pointer-events: auto;
+        }
+        .menu-bar .dropdown-content li {
+            padding: 0.7em 1em;
+            cursor: pointer;
+            color: #DFD0B8;
+            border-bottom: 1px solid #22283133;
+            background: none;
+            transition: background 0.15s, color 0.15s;
+        }
+        .menu-bar .dropdown-content li:last-child {
+            border-bottom: none;
+        }
+        .menu-bar .dropdown-content li:hover, .menu-bar .dropdown-content li:focus {
+            background: #948979;
+            color: #222831;
+        }
         @media (max-width: 900px) {
             body { margin: 1em; }
             .name-col { width: 110px; min-width: 80px; max-width: 140px; font-size: 0.95em; }
@@ -73,7 +111,7 @@
         <nav class="menu-bar">
             <ul>
                 <li class="dropdown">
-                    <span id="show-menu-btn">Show ▾</span>
+                    <span id="show-menu-btn" tabindex="0" aria-haspopup="true" aria-expanded="false">Show ▾</span>
                     <ul class="dropdown-content" id="show-menu-dropdown">
                         <li id="show-all-matches">Show all matches</li>
                         <li id="show-future-matches">Show future matches</li>