diff --git a/src/app/globals.css b/src/app/globals.css
index a3d6c7a..4a41c1b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -113,6 +113,9 @@ p  { font-size: 1rem; line-height: 1.6; color: var(--foreground); }
   background-color: #ffffff;
   box-shadow: 0 2px 10px rgba(0,0,0,0.06);
 }
+.nav {
+  position: relative;
+}
 .top-accent {
   height: 6px;
   background-color: var(--color-red);
@@ -299,10 +302,20 @@ p  { font-size: 1rem; line-height: 1.6; color: var(--foreground); }
     display: none;
     flex-direction: column;
     gap: 0.5rem;
-    margin-top: 0.75rem;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
     width: 100%;
+    background: #ffffff;
+    border-bottom: 1px solid var(--color-border);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+    padding: 1rem;
+    z-index: 100;
+    max-height: calc(100vh - 80px);
+    overflow-y: auto;
   }
-  .nav-toggle[aria-expanded="true"] + .nav-list {
+  .nav-list[data-expanded="true"] {
     display: flex;
   }
   .nav-item {
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index f9ce192..2723423 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -17,6 +17,11 @@ export function Navigation() {
     );
   };
 
+  const closeMenu = () => {
+    setExpanded(false);
+    setExpandedSubs([]);
+  };
+
   const sections = useMemo(() => [
     {
       key: "home",
@@ -75,7 +80,7 @@ export function Navigation() {
         <span className="sr-only">{expanded ? (locale === "en" ? "Close menu" : "Fechar menu") : (locale === "en" ? "Open menu" : "Abrir menu")}</span>
         ☰
       </button>
-      <ul id="primary-menu" className="nav-list">
+      <ul id="primary-menu" className="nav-list" data-expanded={expanded}>
         {sections.map((s) => (
           <li key={s.key} className={s.items.length ? "nav-item has-sub" : "nav-item"}>
             {s.items.length > 0 ? (
@@ -100,13 +105,13 @@ export function Navigation() {
                 <ul className={`submenu ${expandedSubs.includes(s.key) ? "expanded" : ""}`} role="menu" aria-label={s.label}>
                   {s.items.map((it) => (
                     <li key={it.href} role="none">
-                      <Link role="menuitem" href={it.href} className={isActive(it.href) ? "active" : ""}>{it.label}</Link>
+                      <Link role="menuitem" href={it.href} className={isActive(it.href) ? "active" : ""} onClick={closeMenu}>{it.label}</Link>
                     </li>
                   ))}
                 </ul>
               </>
             ) : (
-              <Link className={isActive(s.path) ? "active" : ""} href={s.path}>{s.label}</Link>
+              <Link className={isActive(s.path) ? "active" : ""} href={s.path} onClick={closeMenu}>{s.label}</Link>
             )}
           </li>
         ))}