Window 8 Style Menu In CSS

HTML

<div id="menu-wrapper">
<ul id="menu">
	<li><a href="#" class="orange">Home</a></li>
    <li><a href="#" class="yellow">About</a></li>
    <li><a href="#" class="green">Blog</a></li>
    <li><a href="www.yggdra.nl" target = "_self" class="purple">Services</a></li>
    <li><a href="#" class="pink">Products</a></li>
    <li><a href="#" class="blue">Contact</a></li>
</ul>
</div>

CSS

#menu-wrapper
{
	background:#fff;
	width:500px;
}
#menu
{
	margin:0px;
	padding:0px;
	list-style:none;
}
#menu li
{
	display:table;
	width:150px;
	height:150px;
	background:#000;
	float:left;
	margin:5px;
}
#menu li a
{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	color:#fff;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	opacity:.5;
	transition:all .3s linear;
	-webkit-transition:all .3s linear;
	-moz-transition:all .3s linear;
	-o-transition:all .3s linear;
	-ms-transition:all .3s linear;
}
#menu li a:hover
{
	opacity:1;
}
.yellow
{
	background:#f2c828;
}
.green
{
	background:#96c11f;
}
.pink
{
	background:#e61c67;
}
.blue
{
	background:#009fe3;
}
.purple
{
	background:#544391;
}
.orange
{
	background:#d96802;
}