<style type="text/css">
ul.top {padding:0; margin:0; list-style:none;height:120px;}
ul.top table {border-collapse:collapse; width:0; height:0; margin:-1px 0 -5px -1px;}
ul.top li.topli {float:left; height:120px; width:39px; position:relative; overflow:hidden;
-webkit-transition-duration: .8s;
-moz-transition-duration: .8s;
-o-transition-duration: .8s;
transition-duration: .8s;
}
*html ul.top li.topli {width:auto;}
ul.top li.topli a.topa {float:left; height:120px; width:39px; position:relative; overflow:hidden;}

ul.sub {padding:0; margin:0; list-style:none; height:120px; width:600px; background:url(backing.png) no-repeat right top; position:absolute; 
right:0; top:0;}
ul.sub li {float:left;}
ul.sub li a {display:block; height:120px; float:left; overflow:hidden; position:relative;}
ul.sub li a b {position:absolute; left:-9999px;}
ul.sub li a i {display:block; width:48px; height:48px; position:absolute; right:-50px; bottom:10px;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-o-transition-duration: .3s;
transition-duration: .3s;
}
ul.sub li a.home {width:110px;}
ul.sub li a.products {width:110px;}
ul.sub li a.services {width:110px;}
ul.sub li a.advertise {width:125px;}
ul.sub li a.privacy {width:105px;}
ul.sub li a.home i {background:url(home.png);}
ul.sub li a.products i {background:url(products.png);}
ul.sub li a.services i {background:url(services.png);}
ul.sub li a.advertise i {background:url(advertising.png);}
ul.sub li a.privacy i {background:url(privacy.png);}
ul.top li.topli:hover {width:600px;}
ul.top li.topli a.topa:hover {direction:ltr; width:600px;}
ul.sub li a:hover i {right:10px;}
/* single slide version 2 */
ul.top2 {padding:0; margin:0; list-style:none; height:122px;}
ul.top2 table {border-collapse:collapse; width:0; height:0; margin:-1px 0 -5px -1px;}
ul.top2 li.topli {float:left; height:130px; width:47px; position:relative; overflow:hidden; background:#fff;
-webkit-transition-duration: .8s;
-moz-transition-duration: .8s;
-o-transition-duration: .8s;
}
* html ul.top2 li.topli {width:auto; }
ul.top2 li.topli > span {width:100px; height:30px; text-align:center; position:absolute; top:45px; right:-25px; display:block; float:right; 
font:normal 20px/30px arial, sans-serif; color:#000;
-webkit-transform: rotate(-90deg);  
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
ul.top2 li.topli > span {*top:10px; *right:10px;}
ul.top2 li.topli a.topa {float:left; height:122px; width:39px; position:relative; overflow:hidden; text-decoration:none;}
ul.top2 ul.sub2 {padding:0; margin:0; list-style:none; height:120px; width:600px; border:1px solid #aaa; border-radius:10px; position:absolute; 
right:0; top:0; box-shadow:0 3px 3px rgba(0,0,0,0.6);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2)));
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
ul.top2 ul.sub2 li {float:left;}
ul.top2 ul.sub2 li a {display:block; height:120px; float:left; overflow:hidden; position:relative; width:110px; border-right:1px solid #888; 
text-decoration:none;}
ul.top2 ul.sub2 li a b {display:block; font:bold 15px/25px arial, sans-serif; color:#000; text-decoration:none; padding:0 8px;}
ul.top2 ul.sub2 li a span {display:block; font:normal 12px/18px arial, sans-serif; color:#000; text-decoration:none; padding:0 8px;}
ul.top2 ul.sub2 li a i {display:block; width:49px; height:48px; position:absolute; right:-50px; bottom:10px;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-o-transition-duration: .3s;
}
ul.top2 ul.sub2 li a.home i {background:url(home.png);}
ul.top2 ul.sub2 li a.products i {background:url(products.png);}
ul.top2 ul.sub2 li a.services i {background:url(services.png);}
ul.top2 ul.sub2 li a.advertise i {background:url(advertising.png);}
ul.top2 ul.sub2 li a.privacy i {background:url(privacy.png);}
ul.top2 li.topli:hover {width:610px;}
ul.top2 li.topli a.topa:hover {direction:ltr; width:602px;}
ul.top2 ul.sub2 li a:hover i {right:10px;}
</style>
<h2>CSS3 - The future now - 'Single Slideout' menu</h2>
<h3>3rd May 2010</h3>

<ul class ="top">
    <li class ="topli">
    <!--[if lte IE 6]><a class ="topa" href="#url"><table><tr><td><![endif]-->
	   <ul class ="sub">
		  <li><a class ="home" href="#url"><b>Home</b><i></i></a></li>
		  <li><a class ="products" href="#url"><b>Products</b><i></i></a></li>
		  <li><a class ="services" href="#url"><b>Services</b><i></i></a></li>
		  <li><a class ="advertise" href="#url"><b>Advertise</b><i></i></a></li>
		  <li><a class ="privacy" href="#url"><b>Privacy</b><i></i></a></li>
	   </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul>
<br><br><br>
<h2>CSS3 - 'Single Slideout' menu version 2 - using text</h2>
<h3>15th October 2013</h3>

<ul class ="top2">
    <li class ="topli"><span>Navigation</span>
    <!--[if lte IE 6]><a class ="topa" href="#url"><table><tr><td><![endif]-->
	   <ul class ="sub2">
		  <li><a class ="home" href="#url"><b>Home</b><span>Back to the home page</span><i></i></a></li>
		  <li><a class ="products" href="#url"><b>Products</b><span>See our range of electronics</span><i></i></a></li>
		  <li><a class ="services" href="#url"><b>Services</b><span>We repair and refurbish</span><i></i></a></li>
		  <li><a class ="advertise" href="#url"><b>Advertise</b><span>Place your ads here</span><i></i></a></li>
		  <li><a class ="privacy" href="#url"><b>Privacy</b><span>Our website privacy policy</span><i></i></a></li>
	   </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul>