diff --git a/assets/css/master.css b/assets/css/master.css
index cd4e0ea..a8f4d7e 100644
--- a/assets/css/master.css
+++ b/assets/css/master.css
@@ -107,12 +107,15 @@ nav#sub.active {
 nav#sub > ul {
   padding: 0px;
   margin: 0px;
-  height: 0px;
+  max-height: 0px;
   overflow: hidden;
+  opacity: 0;
+  transition: opacity 0.5s ease, max-height 0.025s ease;
 }
 
 nav#sub > ul.active {
-  height: inherit;
+  max-height: 50vh;
+  opacity: 1;
 }
 
 nav#toTop {
diff --git a/assets/js/interaction.js b/assets/js/interaction.js
index 3cbaefb..3e71298 100644
--- a/assets/js/interaction.js
+++ b/assets/js/interaction.js
@@ -37,6 +37,17 @@ let menuItem = document.querySelector('#menuItem')
 
 let menuVoices = []
 
+// check if any primaryNav items are active
+const primaryActive = () => {
+  let active = false
+  for (let n of primaryNav) {
+    if (n.classList.contains('active')) {
+      active = true
+    }
+  }
+  return active
+}
+
 for (let n of primaryNav) {
   // remove shitty firefox span spacing
   n.nextSibling.parentNode.removeChild(n.nextSibling)
@@ -58,12 +69,14 @@ for (let n of primaryNav) {
     }
     
     // subnav is nav element
-    if (!subNav.classList.contains('active')) {
+    if (primaryActive()) { 
       subNav.classList.add('active')
+    } else {
+      subNav.classList.remove('active')
     }
     
     for (let s of subNav.children) {
-      if (s.id == n.dataset.link) {
+      if (s.id == n.dataset.link && primaryActive()) {
         s.classList.add('active')
       } else {
         s.classList.remove('active')