style.css

body
{
	font: 100% Tahoma;
	text-transform: uppercase;
}

.nav
{
	list-style: none;
	padding: 0;
	margin: 30px;
	width: 50px;
	opacity: .5;

	transition: opacity .3s ease-in-out;
}

.nav:hover
{
	opacity: 1;
}

.nav li
{
	height: 50px;
	width: 50px;
	overflow: hidden;

	transition: width .2s ease-in-out,
				height .2s ease-in-out;
}

.nav li:hover
{
	width: 200px;
	height: 173px;
}

.nav li a
{
	display: block;
	width: 200px;
	height: 40px;
	line-height: 40px;
	background: #bbb;
	margin: 1px;
	color: white;
	padding-left: 15px;
	cursor: pointer;
	text-decoration: none;

	transition: background .2s ease-in-out;
}

.nav li a:hover
{
	background: #2fc5ff;
}

.nav li a:first-child
{
	font-size: 110%;
	height: 50px;
	line-height: 50px;
	position: relative;
	text-indent: 36px;
}

.nav li a:first-child::before
{
	content: '';
	position: absolute;
	display: block;
	height: 32px;
	width: 32px;
	top: 9px;
	left: 9px;
}

.main-menu a:first-child::before
{
	background: url(home.png) center no-repeat;
}

.settings a:first-child::before
{
	background: url(settings.png) center no-repeat;
}

.link a:first-child::before
{
	background: url(link.png) center no-repeat;
}

.search a:first-child::before
{
	background: url(search.png) center no-repeat;
}