menu.css (1528B)
1 .navigation-menu { 2 display: flex; 3 align-items: flex-start; 4 justify-content: space-between; 5 margin: 20px auto 10px auto; 6 flex-direction: column; 7 list-style: none; 8 9 > .navigation-menu__inner { 10 11 > span { 12 flex: 0 0 auto; 13 margin-bottom: 10px; 14 white-space: nowrap; 15 16 &:not(:last-of-type) { 17 margin-right: 20px; 18 19 20 } 21 22 > a { 23 text-decoration: none; 24 &:hover { 25 color: var(--accent); 26 } 27 } 28 29 } 30 } 31 32 .spacer { 33 flex-grow: 1 !important; 34 } 35 } 36 37 .menu { 38 display: flex; 39 flex-direction: column; 40 position: relative; 41 list-style: none; 42 padding: 0; 43 margin: 0; 44 45 > .menu__trigger { 46 margin-right: 0 !important; 47 color: var(--accent); 48 user-select: none; 49 cursor: pointer; 50 } 51 52 .menu__dropdown { 53 54 display: none; 55 56 .open & { 57 display: flex; 58 } 59 60 flex-direction: column; 61 position: absolute; 62 background: var(--bg-color); 63 border: 2px solid; 64 margin: 0; 65 padding: 10px; 66 top: 10px; 67 left: 0; 68 list-style: none; 69 z-index: 99; 70 71 72 > li { 73 flex: 0 0 auto; 74 75 &:not(:last-of-type) { 76 margin-bottom: 10px; 77 } 78 79 > a { 80 display: flex; 81 padding: 5px; 82 } 83 } 84 } 85 } 86