CSS3 tabs (experimental)

dabblet.css

/**
 * CSS3 tabs (experimental)
 */

ul {
list-style: none;
margin: 0;
padding: 0}

.tabs {
position: relative}

.tab {
float: left;
width: 10%}

.tab a {
display: block;
text-decoration: none;}

.tab ul {
width: 50%;
opacity: 0;
position: absolute;
left: 0;
top: 30px;
padding: 20px;
background-color: #EEE;}

.tabs li:first-child ul, .tab a:hover ~ ul {
opacity: 1}

dabblet.html

<div>

	<ul class="tabs">

		<li class="tab"><a href="#">tab 1</a>
			<ul>
			<li>tab content 1</li>
			</ul>
		</li>
		<li class="tab"><a href="#">tab 2</a>

			<ul>
			<li>tab content 2</li>
			</ul>
		</li>
		<li class="tab"><a href="#">tab 3</a>

			<ul>
			<li>tab content 3</li>
			</ul>
		</li>

	</ul>

</div>

settings.json

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