:root {
	--margins: 1rem;
	--border-width: 1px;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	font-family: sans-serif;
	width: 100vw;
	height: 100vh;
}

.menu {
	position: fixed
}

.top {
	top: var(--margins)
}
.bottom { 
	bottom: var(--margins)
}
.left { 
	left: var(--margins)
}
.right {
	right: var(--margins)
}

ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: fit-content;
	position: relative;
}

li {
	display: flex;
	align-items: flex-start;
	position: relative;
	white-space: pre;
	background: white;
}

li > span {
	border: var(--border-width) solid black;
	padding: .5em .75em;
	cursor: pointer;
}

li > ul {
	display: none;
	position: absolute;
}

li:hover > span {
	background: black;
	color: white;
}

li:hover > ul {
	display: flex;
}

.menu.top li {
	margin-bottom: calc(var(--border-width) * -1);
}
.menu.bottom li {
	margin-top: calc(var(--border-width) * -1);
}
.menu.left li {
	margin-left: calc(var(--border-width) * -1);
}
.menu.right li {
	margin-right: calc(var(--border-width) * -1);
}

.menu.bottom ul,
.menu.bottom li {
	flex-direction: column-reverse;
}

.menu.right li > ul {
	right: 100%;
}
.menu.left li > ul {
	left: 100%;
}