schadeck · March 27, 2012 20:33
diff --git a/dabblet.css b/dabblet.css
 /**
 * Pure CSS Clickable Dropdown
 */

 .wrapper {
 	position: relative;
 }

 .wrapper:active .content {
 	display: block;
 }

 .button {
 	background: yellow;
 	height: 20px;
 	width: 150px;
 	cursor: pointer;
 }

 .content {
 	display: none;
 }

 .content:hover {
 	display: block;
 }

 .content {
 	position: absolute;
 	padding-top: 20px;
 }

 .content li {
 	background: red;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->


 <div class="wrapper">
 	<div class="content">
 		<li>Lorem ipsum dolor sit amet.</li>
 		<li>Consectetur adipiscing elit.</li>
 		<li>Lorem ipsum dolor sit amet.</li>
 		<li>Consectetur adipiscing elit.</li>
 	</div>
 	<div class="button">Toggle Button</div>
 </div>
diff --git a/settings.json b/settings.json
 {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
	<!-- content to be placed inside <body>…</body> -->


	<div class="wrapper">
	<div class="content">
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Consectetur adipiscing elit.</li>
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Consectetur adipiscing elit.</li>
	</div>
	<div class="button">Toggle Button</div>
	</div>