Untitled

dabblet.css

#container {
	margin: 0 auto;
	width: 700px;
}
.menu-button {
	background: #F8F8F8;
	background-image: linear-gradient(#FFF, #F0F0F0);
	border: 1px solid #FFF;
	border-color: #FFF #EEE #FEFEFE #FFF;
	color: #3B5998;
	display: block;
	font: bold 13px/18px Arial, sans-serif;
	padding: 12px 18px 13px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px #FFF;
}
.menu-button:hover {
	background: #FCFCFC;
	background-image: linear-gradient(#FFF, #F8F8F8);
}
.selected-menu-item .menu-button {
	background: #F0F0F0;
	border-color: #AAA #CCC #F0F0F0;
	color: #444;
	box-shadow: inset 0 3px 6px #AAA;
}

.menu {
	background: #CCC;
	border: 1px solid #CCC;
	border-radius: 4px;
	display: table;
	padding: 0;
	margin: 0 0 -1px;
	width: 100%;
	*zoom:1;
}
.menu-item {
	display: table-cell;
	*float: left;
}
.menu-item:first-child .menu-button {
	border-radius: 3px 0 0 3px;
}
.menu-item:last-child .menu-button {
	border-radius: 0 3px 3px 0;
}

dabblet.html

<div id="container">
	<ul class="menu">
		<li class="menu-item"><a href="#" class="menu-button">Item 1</a></li>
		<li class="menu-item selected-menu-item"><a href="#" class="menu-button">Item 2</a></li>
		<li class="menu-item"><a href="#" class="menu-button">Item 3</a></li>
		<li class="menu-item"><a href="#" class="menu-button">Item 4</a></li>
		<li class="menu-item"><a href="#" class="menu-button">Item 5</a></li>
	</ul>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}