diff --git a/about/index.html b/about/index.html
index 20fbc60..aa149f2 100644
--- a/about/index.html
+++ b/about/index.html
@@ -25,7 +25,11 @@
         </div>
         <nav>
             <div><a href="/">Home</a></div>
-            <div><a href="/nf/">Nothin' Fancy</a></div>
+            <div class="dropdown-container"><a href="#">Portfolio</a>
+                <div class="dropdown">
+                    <div><a href="/nf/">Nothin' Fancy</a></div>
+                </div>
+            </div>
             <div><a href="/resume/" class="notransition">Resume</a></div>
             <div class="selectedpage"><a href="#">About</a></div>
         </nav>
diff --git a/index.html b/index.html
index 645abd1..eba5fdd 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,11 @@
         </div>
         <nav>
             <div class="selectedpage"><a href="#">Home</a></div>
-            <div><a href="/nf/">Nothin' Fancy</a></div>
+            <div class="dropdown-container"><a href="#">Portfolio</a>
+                <div class="dropdown">
+                    <div><a href="/nf/">Nothin' Fancy</a></div>
+                </div>
+            </div>
             <div><a href="/resume/" class="notransition">Resume</a></div>
             <div><a href="/about/">About</a></div>
         </nav>
diff --git a/nf/index.html b/nf/index.html
index 909b237..a48d3d6 100644
--- a/nf/index.html
+++ b/nf/index.html
@@ -25,7 +25,11 @@
         </div>
         <nav>
             <div><a href="/">Home</a></div>
-            <div class="selectedpage"><a href="#">Nothin' Fancy</a></div>
+            <div class="dropdown-container"><a href="#">Portfolio</a>
+                <div class="dropdown">
+                    <div class="selectedpage"><a href="#">Nothin' Fancy</a></div>
+                </div>
+            </div>
             <div><a href="/resume/" class="notransition">Resume</a></div>
             <div><a href="/about/">About</a></div>
         </nav>
diff --git a/style.css b/style.css
index 0250177..2bac4c3 100644
--- a/style.css
+++ b/style.css
@@ -76,16 +76,16 @@ img {
 nav {
     background-color: #FFFFFF77;
     border-radius: 1em;
-    margin: .5em 0;
+    margin: 0.5em 0;
     display: flex;
 }
 
-nav div {
+nav>div {
     margin: 0.5em;
     border-radius: 0.5em;
 }
 
-nav div a {
+nav>div>a {
     display: block;
     padding: 0.5em;
     font-weight: bold;
@@ -99,10 +99,49 @@ nav div.selectedpage {
     background-color: grey;
 }
 
-nav div:not(.selectedpage):hover {
+nav>div:not(.selectedpage):hover,
+div.dropdown div:not(.selectedpage):hover {
     background-color: #FFFFFF44;
 }
 
+div.dropdown-container {
+    position: relative;
+}
+
+div.dropdown {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, 20%);
+    background-color: var(--headercolor);
+
+    box-sizing: border-box;
+    border-radius: 0.5em;
+    border: 0.2em solid black;
+
+    flex-direction: column;
+    align-items: center;
+}
+
+div.dropdown div {
+    margin: 0.2em;
+    padding: 0.5em;
+    border-radius: 0.5em;
+}
+
+div.dropdown div a {
+    font-weight: bold;
+    font-size: 1.2em;
+    text-decoration: none;
+    white-space: nowrap;
+    color: inherit;
+}
+
+div.dropdown-container:hover div.dropdown {
+    display: flex;
+}
+
 main {
     margin: 0 auto;
     margin-top: 7em;
@@ -203,7 +242,8 @@ footer {
 
 @media screen and (max-width: 750px) {
 
-    nav div a {
+    nav div a,
+    div.dropdown div a {
         font-size: 3vw;
     }