<style>
.menu {width:600px; height:400px; padding:0; margin:30px auto; list-style:none; border:1px solid #ccc; 
position:relative; z-index:100; background:#ddd; overflow:hidden;}
.menu li {float:left; height:400px;}
.menu ul {padding:0; margin:0; list-style:none; position:absolute; z-index:100; top:0; left:0;}
.menu ul ul {position:absolute; left:0; top:auto; bottom:900px; width:200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menu ul li.p2 ul {left:200px;}
.menu ul li.p3 ul {left:400px;}
.menu img {width:200px; height:400px; position:absolute; display:block; opacity:1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.menu ul li {float:left;}
.menu ul img {width:0; height:0; top:200px; z-index:-1;}
.menu img.leftPic1 {left:0; top:0; width:200px; height:400px;}
.menu img.midPic1 {left:200px; top:0; width:200px; height:400px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu img.rightPic1 {left:400px; top:0; width:200px; height:400px;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menu ul img.set1a {top:150px;}
.menu ul img.set1b {top:150px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu ul img.set1c {top:150px;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menu ul img.set2a {top:250px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu ul img.set2b {top:250px;}
.menu ul img.set2c {top:250px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu ul img.set3a {top:350px;transition-delay: 0.5s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menu ul img.set3b {top:350px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu ul img.set3c {top:350px;}
.menu ul img.leftPic {left:100px;}
.menu ul img.midPic {left:300px;}
.menu ul img.rightPic {left:500px;}
.menu .menuInner {width:600px;}
.menu .menuInner li a {display:block; width:190px; height:50px; padding-left:10px; background:#a60; 
margin-top:300px; font:bold 14px/50px arial, sans-serif; color:#300; text-decoration:none;}
.menu li:hover img.leftPic1 {left:100px; top:50px; height:0; width:0;}
.menu li:hover img.midPic1 {left:300px; top:50px; height:0; width:0}
.menu li:hover img.rightPic1 {left:500px; top:50px; height:0; width:0;}
.menu ul li:hover img.leftPic {left:0; top:0; height:400px; width:200px;}
.menu ul li:hover img.midPic {left:200px; top:0; height:400px; width:200px}
.menu ul li:hover img.rightPic {left:400px; top:0; height:400px; width:200px;}
.menu ul li:hover {zoom:1;}
.menu ul li:hover > a {background:#c80; color:#fff;}
.menu ul ul li {height:25px; float:left;}
.menu .menuInner ul li a {height:25px; line-height:25px; font-weight:normal; color:#fff;}
.menu ul li:hover ul {top:auto; bottom:400px;}
</style>
<br>
<ul class ="menu">
    <li class ="topLi"><a href="#url"></a>
    <img class ="leftPic1" src="pic4a.jpg" alt="">
    <img class ="midPic1" src="pic4b.jpg" alt="">
    <img class ="rightPic1" src="pic4c.jpg" alt="">
	   <ul class ="menuInner">
		  <li class ="p1"><a href="#url">Restaurants</a>
			 <img class ="leftPic set1a" src="pic1a.jpg" alt="">
			 <img class ="midPic set1b" src="pic1b.jpg" alt="">
			 <img class ="rightPic set1c" src="pic1c.jpg" alt="">
			 <ul>
				<li><a href="#url">The Flagship</a></li>
				<li><a href="#url">The Blue Room</a></li>
				<li><a href="#url">Bar &amp; Pub</a></li>
				<li><a href="#url">Special Occasions</a></li>
			 </ul>
		  </li>
		  <li class ="p2"><a href="#url">Rooms &amp; Suites</a>
			 <img class ="leftPic set2a" src="pic2a.jpg" alt="">
			 <img class ="midPic set2b" src="pic2b.jpg" alt="">
			 <img class ="rightPic set2c" src="pic2c.jpg" alt="">
			 <ul>
				<li><a href="#url">Categories</a></li>
				<li><a href="#url">Availability</a></li>
				<li><a href="#url">Special Breaks</a></li>
				<li><a href="#url">Booking</a></li>
				<li><a href="#url">Reservations</a></li>
			 </ul>
		  </li>
		  <li class ="p3"><a href="#url">List</a>
			 <img class ="leftPic set3a" src="pic3a.jpg" alt="">
			 <img class ="midPic set3b" src="pic3b.jpg" alt="">
			 <img class ="rightPic set3c" src="pic3c.jpg" alt="">
			 <ul>
				<li><a href="#url">Sauvignon Blanc</a></li>
				<li><a href="#url">Pinot Noir</a></li>
				<li><a href="#url">Chardonnay</a></li>
				<li><a href="#url">Merlot</a></li>
				<li><a href="#url">Shiraz</a></li>
				<li><a href="#url">Puglia</a></li>
			 </ul>
		  </li>
	   </ul>
    </li>
</ul>