<style type="text/css">
.menu {width:149px; height:149px; padding:0; margin:0; list-style:none; position:relative; background:#aaa; 
font-family:arial, sans-serif; float:left; margin-right:1px;
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
.menu li.image {width:0; height:0; position:absolute; left:75px; bottom:0; z-index:10;
-moz-transition: 0.15s 0.1s;
-ms-transition: 0.15s 0.1s;
-o-transition: 0.15s 0.1s;
-webkit-transition: 0.15s 0.1s;
transition: 0.15s 0.1s;
}
.menu li.image b {display:block; width:100%; height:100%;
-moz-transition: 0.1s 0s;
-ms-transition: 0.1s 0s;
-o-transition: 0.1s 0s;
-webkit-transition: 0.1s 0s;
transition: 0.1s 0s;
}
.menu li.image b img {display:block; width:100%; height:100%;}
.menu li.list {position:absolute; left:0; top:0; width:149px; height:150px; text-align:center; background:#222; z-index:20;
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-moz-transition: 0.15s 0.15s;
-ms-transition: 0.15s 0.15s;
-o-transition: 0.15s 0.15s;
-webkit-transition: 0.15s 0.15s;
transition: 0.15s 0.15s;
}

.menu li.list b {display:block; margin-top:0; color:#fff; font-weight:normal; font-size:14px; line-height:150px; 
-moz-transition: 0.15s;
-ms-transition: 0.15s;
-o-transition: 0.15s;
-webkit-transition: 0.15s;
transition: 0.15s;
}
.menu li.sub {position:absolute; left:0; top:0; height:150px; z-index:-1;
-moz-transition: 0.15s 0.15s;
-ms-transition: 0.15s 0.15s;
-o-transition: 0.15s 0.15s;
-webkit-transition: 0.15s 0.15s;
transition: 0.15s 0.15s;
}
.menu li.sub ul {padding:0; margin:0; list-style:none; width:149px; height:100%; background:#222;
-moz-transition: 0.15s;
-ms-transition: 0.15s;
-o-transition: 0.15s;
-webkit-transition: 0.15s;
transition: 0.15s;
}
.menu li.sub ul li {width:100%;}
.menu li.sub ul li:first-child {padding-top:0px;}
.menu li.sub ul li a {display:block; padding:2px 10px; color:#fff; text-decoration:none; font-size:14px;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.menu li.sub ul li a:hover {background:#09c;}
.menu li.sub ul.subRight li a {text-align:right;}
.menu:hover {z-index:100;}
.menu:hover li.image {width:180px; height:270px; left:-15px; bottom:-1px;
-moz-transition: 0.2s 0.5s;
-ms-transition: 0.2s 0.5s;
-o-transition: 0.2s 0.5s;
-webkit-transition: 0.2s 0.5s;
transition: 0.2s 0.5s;
}
.menu:hover li.image b {margin:46px 0 0 15px; width:83%; height:83%;
-moz-transition: 0.15s 0.7s;
-ms-transition: 0.15s 0.7s;
-o-transition: 0.15s 0.7s;
-webkit-transition: 0.15s 0.7s;
transition: 0.15s 0.7s;
}
.menu:hover li.list {top:150px; height:200px;border-top:1px solid #fff; border-right:1px solid #fff; 
border-left:1px solid #fff; margin-left:-1px;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
-webkit-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu:hover li.list b {margin-top:-20px; color:#09c; font-size:20px; line-height:225px;
-moz-transition: 0.25s 0.75s;
-ms-transition: 0.25s 0.75s;
-o-transition: 0.25s 0.75s;
-webkit-transition: 0.25s 0.75s;
transition: 0.25s 0.75s;
}
.menu:hover li.sub {top:151px; height:200px;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
-webkit-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu:hover li.sub ul li:first-child {padding-top:40px;}
.menu:hover li.sub ul.subLeft {margin-left:150px;
-moz-transition: 0.25s 0.75s;
-ms-transition: 0.25s 0.75s;
-o-transition: 0.25s 0.75s;
-webkit-transition: 0.25s 0.75s;
transition: 0.25s 0.75s;
}
.menu:hover li.sub ul.subRight {margin-left:-150px;
-moz-transition: 0.25s 0.75s;
-ms-transition: 0.25s 0.75s;
-o-transition: 0.25s 0.75s;
-webkit-transition: 0.25s 0.75s;
transition: 0.25s 0.75s;
}
.clear {clear:left;}
</style>
<br /> <br /><br /><br /><br />
<ul class ="menu">
    <li class ="image"><b><img src="bedroom.jpg" alt=""></b></li>
    <li class ="list"><b>BEDROOM</b></li>
    <li class ="sub">
	   <ul class ="subLeft">
		  <li><a href="#url">Item one</a></li>
		  <li><a href="#url">Item two</a></li>
		  <li><a href="#url">Item three</a></li>
		  <li><a href="#url">Item four</a></li>
		  <li><a href="#url">Item five</a></li>
	   </ul>
    </li>
</ul>
<ul class ="menu">
    <li class ="image"><b><img src="kitchen.jpg" alt=""></b></li>
    <li class ="list"><b>KITCHEN</b></li>
    <li class ="sub">
	   <ul class ="subLeft">
		  <li><a href="#url">Item one</a></li>
		  <li><a href="#url">Item two</a></li>
		  <li><a href="#url">Item three</a></li>
		  <li><a href="#url">Item four</a></li>
		  <li><a href="#url">Item five</a></li>
	   </ul>
    </li>
</ul>
<ul class ="menu">
    <li class ="image"><b><img src="living.jpg" alt=""></b></li>
    <li class ="list"><b>LIVING ROOM</b></li>
    <li class ="sub">
	   <ul class ="subLeft">
		  <li><a href="#url">Item one</a></li>
		  <li><a href="#url">Item two</a></li>
		  <li><a href="#url">Item three</a></li>
		  <li><a href="#url">Item four</a></li>
		  <li><a href="#url">Item five</a></li>
	   </ul>
    </li>
</ul>
<ul class ="menu">
    <li class ="image"><b><img src="play.jpg" alt=""></b></li>
    <li class ="list"><b>PLAY ROOM</b></li>
    <li class ="sub">
	   <ul class ="subRight">
		  <li><a href="#url">Item one</a></li>
		  <li><a href="#url">Item two</a></li>
		  <li><a href="#url">Item three</a></li>
		  <li><a href="#url">Item four</a></li>
		  <li><a href="#url">Item five</a></li>
	   </ul>
    </li>
</ul>
<ul class ="menu">
    <li class ="image"><b><img src="study.jpg" alt=""></b></li>
    <li class ="list"><b>STUDY</b></li>
    <li class ="sub">
	   <ul class ="subRight">
		  <li><a href="#url">Item one</a></li>
		  <li><a href="#url">Item two</a></li>
		  <li><a href="#url">Item three</a></li>
		  <li><a href="#url">Item four</a></li>
		  <li><a href="#url">Item five</a></li>
	   </ul>
    </li>
</ul>
<br class ="clear">
<br><br><br><br><br><br><br><br>