slider menu (css only)

dabblet.css

/**
 * slider menu (css only)
 */
 
 /**
 * its not usable nowadys as it
 * only works in Firefox and Webkit (should also work in IE10 but not tested)
 * and even there you can not select the subnavi via keyboard
 */

.parent {display: table}		

a {
	font-family: Arial, sans-serif;			
	color: #fff;			
	font-size: 16px;			
	line-height: 30px;			
	text-decoration: none;			
	background: rgba(0, 0, 0, 0.7);			
	border-radius: 5px 0 0 5px;			
	padding: 1px 5px;			
	position: relative		
}		

.parent a {background: rgba(0, 0, 0, 0.9);}		

.parent a:after {			
	background: rgba(0, 0, 0, 0.9);			
	content: "";			
	display: none;			
	height: 2px;			
	position: absolute;			
	right: -100%;			
	z-index: -1;			
	top: 50%;			
	width: 100%;		
}		

a:hover,
a:focus {			
	background: rgba(0, 0, 0, 0.1);			
	color: #000		
}		

li ul a {border-radius: 0 5px 5px 0}		

li:hover ul a:after {display: none}		

li {list-style: none}		

li ul {
	visibility: hidden;			
	height: 0;			
	padding: 0;			
	margin: 0 0 0 100%;		
}

li:hover ul,		
a:focus + ul{animation: slide 2s 1 forwards}	

li:hover a:after {display: block}		

@keyframes slide {			
	100% {
		visibility: visible; 				
		height: 100%; 				
		margin: 0 0 0 33%			
	}		
}

dabblet.html

<ul>		
	<li><a href="#">Home</a></li>		
	<li><a href="#">Travel</a></li>		
	<li class="parent">			
		<a href="#">Sport</a>			
		<ul>				
			<li><a href="#">Summer</a></li>				
			<li><a href="#">Wintersport</a></li>			
		</ul>		
	</li>		
	<li class="parent">			
		<a href="#">Pictures and Videos</a>			
		<ul>				
			<li><a href="#">Best of 2011</a></li>				
			<li><a href="#">Picture of the Day during the night and so on</a></li>			
		</ul>	
	</li>	
</ul>

settings.json

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