dropdown take one needs review

styles/main.css

@@ -123,40 +123,9 @@ time {
   font-weight: 700;
 }
 
-nav ul {
-  display: flex;
-  gap: 1rem;
-  list-style: none;
-  justify-content: center;
-  margin: 1rem auto;
-}
-
-nav a {
-  font-size: 1.4rem;
-  border: 1px solid;
-  border-radius: .15rem;
-  padding: .15rem .3rem;
-  color: var(--color-accent);
-  text-decoration: none;
-}
-
-@media (max-width: 650px) {
-  nav a {
-    font-size: 1.1rem;
-  }
-}
-
-@media (any-hover: hover) {
-  nav a:hover {
-    color: var(--color-bg);
-    background-color: var(--color-accent);
-  }
-}
-
-nav a:focus-visible {
-  outline: none;
-  color: var(--color-bg);
-  background-color: var(--color-accent);
+button {
+  cursor: pointer;
+  background-color: var(--color-bg);
 }
 
 header img {

styles/nav.css

@@ -0,0 +1,73 @@
+nav {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin: 1rem auto;
+}
+
+nav a,
+nav button {
+  font-size: 1.4rem;
+  border: 1px solid;
+  border-radius: .15rem;
+  padding: .15rem .3rem;
+  color: var(--color-accent);
+  text-decoration: none;
+  line-height: 2rem;
+}
+
+@media (max-width: 650px) {
+  nav a {
+    font-size: 1.1rem;
+  }
+}
+
+@media (any-hover: hover) {
+  nav a:hover,
+  nav button:hover {
+    color: var(--color-bg);
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+}
+
+nav a:focus-visible,
+nav button:focus-visible {
+  outline: none;
+  color: var(--color-bg);
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+#current-page {
+  border-right-width: .5rem;
+  border-left-width: .5rem;
+}
+
+nav ul {
+  list-style: none;
+  display: none;
+  position: absolute;
+  z-index: 1;
+  margin: 0 0 0 1rem;
+  min-width: 8rem;
+}
+
+#dropdown {
+  position: relative;
+  display: inline-block;
+  min-width: 3rem;
+}
+
+nav ul.show {
+  display: block;
+}
+
+nav ul li {
+  margin: .25rem;
+}
+
+nav ul a {
+  display: inline-block;
+  background-color: var(--color-bg);
+}