Stylish menu

dabblet.css

/**
 * Stylish menu
 */

html {
	height: 100%;
}
body {
	background-color: #f06;
	background-image: linear-gradient(0deg, #f06, yellow);
	background-size: cover;
	background-repeat: repeat-x;
	margin: 0;
	padding: 50px;
	min-height: 100%;
	font-family: Tahoma, Verdana, sans-serif;
}
#menu {
	display: block;
	margin: 0 auto;
	width: 12rem;
	border: 5px solid rgba(245, 245, 245, .4);
	border-radius: 6px;
	box-shadow: 0 0 5px #595959aa;
}
#menu a {
	display: block;
	position: relative;
	padding: .5em;
	text-decoration: none;
	background-color: #f8f8f8;
	color: #272e49;
}
#menu a + a {
	border-top: 1px solid rgba(180, 180, 180, .3);
}
#menu a:first-child {
	border-radius: 2px 2px 0 0;
}
#menu a:last-child {
	border-radius: 0 0 2px 2px;
}
#menu a:hover,
#menu a:focus {
	color: #0093c6;
	z-index: 1;
	background-color: #fafafa;
	filter: drop-shadow(0 0 5px #59595944);
}
#menu a:focus {
	outline: none;
}
#menu a:hover::after,
#menu a:focus::after {
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
	height: 100%;
	width: 2em;
	clip-path: polygon(0 0, 50% 50%, 0 100%);
	background-color: #fafafa;
}

dabblet.html

<nav id="menu">
	<a href="#0">Link 1</a>
	<a href="#0">Link 2</a>
	<a href="#0">Link 3</a>
	<a href="#0">Link 4</a>
	<a href="#0">Link 5</a>
</nav>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}