.container { user-select: none; -webkit-user-select: none; height: 1.5em; width: 100%; background: #fafafa; display: flex; flex-direction: row; justify-content: flex-start; position: fixed; top: 0; z-index: 201; font-family: Arial, serif; > .containerMenuItem { > .menuItem { .containerIcon { display: none; } } } hr { margin-top: .125em; margin-bottom: .125em; } } .containerMenuItem { position: relative; .menuItem { cursor: pointer; padding-left: .4em; padding-right: .4em; height: 100%; display: flex; flex-direction: row; width: max-content; > * { vertical-align: middle; } .containerIcon { height: 1.2em; width: 1.2em; padding: .1em; font-size: 1em; margin-right: .2em; display: inline-block; } .containerLabel { display: inline-block; align-self: center; a { white-space: nowrap; } } } &:hover:not(.disabled) { background-color: rgba(0, 0, 0, 0.27); } &.disabled { background-color: rgba(0, 0, 0, 0.13); pointer-events: none; } &.hidden { display: none; } .subMenu { z-index: 1000; display: none; background: white; position: absolute; top: 100%; border: 1px solid black; > .container-menu-item { padding-right: .5em; } } &.typeSide { &.subEntries { padding-right: .8em; } &.subEntries:after { position: absolute; display: block; content: '>'; top: 0; bottom: 0; right: .4em; } > .subMenu { top: -1px; /* border */ left: 100%; } &:hover { > .subMenu { display: block; } } } &.active { background-color: rgba(0, 0, 0, 0.27); > .subMenu { display: block; } } }