Untitled

dabblet.css

body {background: #f6f6f6; font: normal 16px/1.6 Arial;}
.container { padding: 20px; width: 300px; margin: 100px auto; background: #FFF;}
.handle { color: #23377C; border-bottom: 1px dashed #23377C; cursor: pointer;}

.dropdown {
	position: absolute;
	background: white;
	box-shadow: 0 0 5px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.1);
	z-index: 999;
}
.dropdown::before {
	content: '';
	position: absolute;
	top: -5px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -7px;
	background: inherit;
	box-shadow: inherit;
	transform: scaleX(0.6) rotate(45deg);
	z-index: -1;
}
.dropdown::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: inherit;
	z-index: -1;
}


.dropdown {
	padding: 3px 0;
}
.wl {
	display: block;
	padding: 3px 10px;
	vertical-align: buttom;
}

.wl:hover {
	background: #FFE;
	cursor: pointer;
}

dabblet.html

<div class="container">
They shone far off in the moonlight. The tallest was furthest <span class="handle">away</span>, standing alone upon a green mound.
<div class="dropdown" style="top: 180px; left: 306px;">
	<label class="wl"><input type="checkbox"> Rusland</label>
	<label class="wl"><input type="checkbox"> Germany</label>
	<label class="wl"><input type="checkbox"> England</label>
	<label class="wl"><input type="text" size="13" placeholder="Create new list"></label>
</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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