CSS Menu

dabblet.css

/* CSS Menu */
@charset 'UTF-8';
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

/* layout: [menu] menu */
[menu] { position:relative }
[menu]:before { content:'\2026' }
	[menu] menu { position:absolute; top:100%; right:0 }
		[menu] menu > * { display:block; white-space:nowrap }

/* interaction: [menu] menu */
[menu] { cursor:context-menu }
	[menu] menu { max-height:0; overflow:hidden;
	transition:max-height 250ms .5s }
	[menu]:active menu,
	[menu] menu:hover { max-height:5em; overflow:visible;
	transition:max-height 1ms }

/* theme */
menu { background:#555; color:white }
	menu button,
	menu a { padding:0 1.6em }
	[menu] menu { background:#eee; color:#333 }
	[menu] menu a:hover { background:#56a5d0; color:white }
	

/* theme bonus: pointer */
[menu] menu a:first-child:before { content:''; 
	width:.6em; height:.6em;
 	position:absolute; right:1.85em;
 	transform:rotate(-45deg); transform-origin:0 0;
 	background:#555 }
 	[menu] menu a:hover:before { background:#56a5d0 }
	
/* demo */
* { font:1em/1.6 Source Sans Pro; margin:0; padding:0;
 color:inherit }
body { margin:0 2em }
li { list-style:inside }
button, a { cursor:pointer; background:transparent; border:0 }
h1 { font-size:2.6em }
p { margin:1em 0 }

dabblet.html

<h1>#CSS3 menu { transition }</h1>

<p>Basic implementation of a dropdown menu
using <code>transition:max-height</code>.</p>

<menu>
	<button>one</button>
	<button>two</button>
	<button menu>
		<menu>
		  <a>One option</a>
		  <a>Another option</a>
		  <a>The last option</a>
		</menu>
	</button>
</menu>

<p>This is a pure HTML+CSS3 solution (no JS).
 

<p>Details to keep an eye on:
<ul>
  <li>use of <code>content</code> pseudo-element
  <li><code>cursor</code> affordances
  <li>pseudo-element pointer

settings.json

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