header nav: switch to dropdown menus

This commit is contained in:
Sarah Vaupel 2023-05-19 20:31:16 +00:00
parent 996a0760b6
commit 7a5bb77545

View File

@ -1,13 +1,11 @@
header header
width: 100vw width: 100vw
min-height: 3em
background-color: green background-color: green
color: white color: white
font-weight: 600 font-weight: 600
font-size: 1.2em font-size: 1.2em
line-height: 1.5em line-height: 1.5em
white-space: nowrap
a a
color: white color: white
@ -17,25 +15,30 @@ header
text-decoration: none text-decoration: none
// parent menu // parent menu
& > nav ul & > nav > ul
display: inline display: inline
list-style-type: none list-style-type: none
margin: 0 margin: 0
padding: 0 padding: 0
overflow: hidden
// menu items // menu items
& > li & > li
display: inline display: inline-block
padding: 4px 20px padding: 4px 20px
white-space: nowrap
// submenus
& > ul
display: none
position: absolute
width: 100vw
z-index: 1
&:hover &:hover
background-color: red background-color: red
& > ul & > ul
display: block display: block
// submenus
& > ul
background-color: black
display: none
position: absolute
z-index: 1
list-style-type: none
& > li:hover
background-color: red