Menu 2013

HTML

<div class="menu-default">
	<div class="top"></div>
	<ul>
		<li tabindex="1"><a href="#"><div class="box"></div><span>Home</span></a>
			<ul>
				<div class="content">
					waidhaidjdida
				</div>
			</ul>
		</li>
		<li tabindex="1"><a href="#"><div class="box"></div><span>Layouts</span></a></li>
		<li tabindex="1"><a href="#"><div class="box"></div><span>Something</span></a></li>
	</ul>
</div>

CSS

body{
	margin:0px;
	background: url(../img/background.png);
}

*:focus {
    outline: 0;
}

.menu-default{
	width: 220px;
	height: 100%;
	position:fixed;
	background-color: white;
	top:0;
	bottom:0;
	left:0;
	border-right:1px solid #d0d0d0;
}

.menu-default .top{
	width:221px;
	height: 152px;
	background-color: #313131;
	margin-bottom:1px;
	!margin-bottom:4px; /* IE7 */
}

.menu-default ul{
	list-style-type: none;
	padding:0px;
	margin: 0px;
	!margin-left:0px; /* IE7 */
}

.menu-default ul li {
	position: relative;
	width:100%;
	background-color:white;
	border-top:1px solid #dadada;
	border-bottom:1px solid #dadada;
	margin-top:-1px;
	!margin-top:-4px; /* IE7 */
}

.menu-default ul li ul {
    position:fixed;
    z-index:1;
    height:100%;
    margin-left: 221px;
    -webkit-transition: .5s width ease, .5s height ease-in 0.5s;
    -o-transition: .5s width ease, .5s height ease-in 0.5s;
    -ms-transition: .5s width ease, .5s height ease-in 0.5s;
    -moz-transition: .5s width ease, .5s height ease-in 0.5s;
    transition: .5s width ease, .5s height ease-in 0.5s;
    background-color: #f4f4f4;
    width:0px;
    overflow:hidden;
    list-style-type:none;
    padding:0px;
    top:0;
}

.menu-default ul li ul .content{
    width:150px;
    margin-left:-150px;
    -webkit-transition: .5s margin-left ease;
    -moz-transition: .5s margin-left ease;
    -ms-transition: .5s margin-left ease;
    -o-transition: .5s margin-left ease;
    transition: .5s margin-left ease;
}

.menu-default ul li:focus ul .content{
    margin-left:0px;
    -webkit-transition: .5s margin-left ease 0.5s;
    -moz-transition: .5s margin-left ease 0.5s;
    -ms-transition: .5s margin-left ease 0.5s;
    -o-transition: .5s margin-left ease 0.5s;
    transition: .5s margin-left ease 0.5s;
}
.menu-default ul li:focus ul, .menu-default ul li ul:focus, .menu-default ul li ul:focus ~ ul{
    margin-left:221px;
    height:100%;
    width:500px;
    -webkit-transition: .5s width ease 0.5s, .0s height...