keep menu always open

style.css

@@ -1,21 +1,68 @@
 body {
-  font-size: xx-large
+  font-size: medium;
+  display: flex;
+  padding: 1em;
 }
 
-li {
+nav {
+  display: flex;
+  font-size: xx-large;
+}
+
+menu {
+  padding: 0;
+  margin: 0;
+}
+
+menu li {
   marker: none;
-  list-style: none
+  list-style: none;
+  /* display: none; /* TODO: go vertical / dropdown on small screens */ */
 }
 
-a {
+menu:hover li {
+  transition: display 1s ease-in-out;
+  display: block;
+}
+
+menu li.active {
+  display: inherit;
+}
+
+header {
+  flex-shrink: 0;
+}
+
+main {
+  padding-left: 1.5rem;
+}
+
+nav a {
   text-decoration: none;
   color: inherit
 }
 
-a:hover {
+nav a:hover {
   text-decoration: underline
 }
 
+ul li { 
+  display: flex;
+  align-items: baseline;
+}
+
+ul li span {
+  min-width: 5em;
+  text-align: right;
+  padding-right: 1rem;
+  line-height: 1.5rem;
+  vertical-align: baseline;
+}
+
+ul li a {
+  font-size: larger;
+}
+
 :root {
   --red: #f21332;
   --orange: #f27225;
@@ -32,10 +79,3 @@ li:nth-of-type(6n + 3):hover, li.active:nth-of-type(6n + 3) { color: var(--pink)
 li:nth-of-type(6n + 4):hover, li.active:nth-of-type(6n + 4) { color: var(--green) }
 li:nth-of-type(6n + 5):hover, li.active:nth-of-type(6n + 5) { color: var(--blue) }
 li:nth-of-type(6n + 6):hover, li.active:nth-of-type(6n + 6) { color: var(--purple) }
-
-menu {
-  padding: 0;
-  margin: 0;
-}
-
-nav { display: flex }