Settle on a transition for dropdown display

1 files changed, 9 insertions, 19 deletions

diff --git a/commun.css b/commun.css
index 9556292..3d3dd20 100644
--- a/commun.css
+++ b/commun.css
@@ -76,7 +76,6 @@ nav li.dropdown {
     position: relative;
 }
 nav li.dropdown ul {
-    display: none;
     position: absolute;
     padding-left: 0;
     width: 100%;
@@ -84,22 +83,14 @@ nav li.dropdown ul {
     background: lightgrey;
     z-index: 1;
 
-    /* TODO: transition? ⚠ display: block */
-
-    /* overflow: hidden; */
-    /* max-height: 0; */
-    /* transition: max-height 0.5s; */
-
-    /* transform: scaleY(0); */
-    /* transform-origin: top; */
-    /* transition: transform 0.5s; */
-
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.5s;
 }
 nav li.dropdown:hover ul {
-    display: block;
-    /* TODO: transition? ⚠ redundant display: block */
-    /* max-height: 100vh; */
-    /* transform: scaleY(1); */
+    /* ⚠ Magic constant: must be big enough to show the whole dropdown,
+       but not too big otherwise the transition will be "delayed". */
+    max-height: 5em;
 }
 nav li.dropdown > ul > li {
     list-style-type: none;
@@ -112,16 +103,15 @@ nav li.dropdown > ul > li a {
     padding-inline-start: 10%;
 }
 nav li.dropdown > ul > li a img {
-    width: 32px;
-    height: 32px;
+    width: 1em;
+    height: 1em;
 }
 
-
 .current {
     background-color: white;
 }
 
-nav ol li a {
+nav li a {
     text-decoration: none;
 }