details { margin: 5px; position: absolute; z-index: 9999; } summary { writing-mode: vertical-lr; text-align: center; padding: 12px 10px; width: 23px; height: 17px; background-color: var(--primColor); border-radius: var(--cornerRad); color: var(--secoColor); cursor: pointer; user-select: none; outline: none; transition: transform 200ms ease-in-out 0s; } summary::before, summary::after { position: static; top: 0; left: 0; } summary::before { content: ""; } summary::after { content: "III"; letter-spacing: -1px; } summary:hover { transform: scale(1.1); } summary::marker { font-size: 0; } summary::-webkit-details-marker { display: none; } details[open] .menu { animation-name: menuAnim; } details[open] summary::before { content: "X"; } details[open] summary::after { content: ""; } .menu { height: 0; width: fit-content; border-radius: var(--cornerRad); background-color: #fff; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); margin-top: 8px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; animation: closeMenu 300ms ease-in-out forwards; z-index: 9999; } .menu a { padding: 12px 24px; margin: 0 16px; color: var(--secoColor); border-bottom: 2px solid rgba(0, 0, 0, 0.1); text-decoration: none; text-align: center; transition: filter 200ms linear 0s; } .menu a:nth-of-type(1) { padding-top: 24px; } .menu a:nth-last-of-type(1) { border-bottom: none; } .menu a:hover { filter: brightness(200%); } details::before { color: var(--secoColor); position: absolute; margin-left: 80px; padding: 10px 10px; opacity: 0.4; } details[open]::before { animation: fadeMe 300ms linear forwards; } @keyframes menuAnim { 0% { height: 0; } 100% { height: 312px; } } @keyframes fadeMe { 0% { opacity: 0.4; } 100% { opacity: 0; } }