The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

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

body {
	font-family: "Helvetica Neue", Arial, sans-serif;
	background: #eee;
}

header {
	width: 100%;
	height: 50px; line-height: 50px;
	background: #5075BD;
	color: #eee;
	margin-top: 0px;
}

.wrap {
	width: 100%; max-width: 760px;
	padding: 0 30px; margin: 0 auto;
}

header h1 { color: #fff; font-size: 2m; float: left; }

header .wrap > ul {
	float: right;
}

header .wrap > ul > li {
	float: left;
	padding: 0 10px;
	height: 50px;
	font-weight: bold;
	position: relative;
	overflow: hidden;
}

header .wrap > ul > li:hover {
	background: rgba(0, 0, 0, .2);
	overflow: visible;
}

header ul { list-style: none; }

header .nested > ul {
	position: absolute;
	top: 57px;
	left: 0; right: 0;
	background: #fff;
	text-align: center;
	color: #333;
	border-radius: 5px;
	box-shadow: 0 0 3px rgba(0, 0, 0, .1);
	z-index: 3;
	opacity: 0;
	margin-top: -3px;
	transition: all .2s ease;
	padding: 15px 0;
	z-index: 3;
}

header .nested > ul:before {
	content: '';
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	position: absolute;
	top: -5px;
	left: 50px;
	margin-left: -3.5px;
	background: #fff;
	box-shadow: 3px 3px 0 white, 0 0 3px rgba(0, 0, 0, .1);
	z-index: 1;
}



header .nested > ul:after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	top: -60px;
	height: 100px;
}

header > .wrap > ul > .nested {
	padding-right: 30px;
}

header > .wrap > ul > .nested:hover > ul {
	opacity: 1;
	margin-top: 0;
}

header > .wrap > ul > .nested:before {
	width: 0; height: 0;
	border: 5px solid transparent;
	border-bottom: none;
	border-top-color: #eee;
	position: absolute;
	top: 50%;
	margin-top: -2.5px;
	right: 10px;
	content: '';
}

header .nested li {
	text-align: center;
	width: 100%;
}

header .nested li:hover {
	background: #5075BD;
	color: #eee;
}

dabblet.html

<header>
	<div class="wrap">
		<h1>Blogcase</h1>
		<ul>
			<li>Home</li>
			<li>About</li>
			<li class="nested">
				Settings
				<ul>
					<li>Account</li>
					<li>Profile</li>
				</ul>
			</li>
		</ul>
	</div>
</header>

settings.json

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