Membuat Animasi Menu Pullup

<!-- Kode CSS -->
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/css3-slide-pullup.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.menuplus {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;}
.menuplus li {float:left; height:400px;}
.menuplus ul {padding:0; margin:0; list-style:none; position:absolute; z-index:100; top:0; left:0;}
.menuplus 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;
}
.menuplus ul li.p2 ul {left:200px;}
.menuplus ul li.p3 ul {left:400px;}
.menuplus 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;
}

.menuplus ul li {float:left;}
.menuplus ul img {width:0; height:0; top:200px; z-index:-1;}

.menuplus img.leftPic1 {left:0; top:0; width:200px; height:400px;}
.menuplus 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;
}
.menuplus 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;
}

.menuplus ul img.set1a {top:150px;}
.menuplus 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;
}
.menuplus ul img.set1c {top:150px;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}

.menuplus 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;
}
.menuplus ul img.set2b {top:250px;}
.menuplus 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;
}

.menuplus 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;
}
.menuplus 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;
}
.menuplus ul img.set3c {top:350px;}

.menuplus ul img.leftPic {left:100px;}
.menuplus ul img.midPic {left:300px;}
.menuplus ul img.rightPic {left:500px;}

.menuplus .menuInner {width:600px;}
.menuplus .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;}

.menuplus li:hover img.leftPic1 {left:100px; top:50px; height:0; width:0;}
.menuplus li:hover img.midPic1 {left:300px; top:50px; height:0; width:0}
.menuplus li:hover img.rightPic1 {left:500px; top:50px; height:0; width:0;}

.menuplus ul li:hover img.leftPic {left:0; top:0; height:400px; width:200px;}
.menuplus ul li:hover img.midPic {left:200px; top:0; height:400px; width:200px}
.menuplus ul li:hover img.rightPic {left:400px; top:0; height:400px; width:200px;}

.menuplus ul li:hover {zoom:1;}
.menuplus ul li:hover > a {background:#c80; color:#fff;}

.menuplus ul ul li {height:25px; float:left;}
.menuplus .menuInner ul li a {height:25px; line-height:25px; font-weight:normal; color:#fff;}
.menuplus ul li:hover ul {top:auto; bottom:400px;}
</style>

<!-- Kode HTML -->
<div id="info">
<ul class="menuplus">
<li class="topLi"><a href="#url"></a>
<img class="leftPic1" src="http://caprt3a.blogspot.com/pic4a.jpg" alt="" />
<img class="midPic1" src="http://caprt3a.blogspot.com/pic4b.jpg" alt="" />
<img class="rightPic1" src="http://caprt3a.blogspot.com/pic4c.jpg" alt="" />

<ul class="menuInner">
<li class="p1"><a href="#url">Kota Tangerang</a>
<img class="leftPic set1a" src="http://caprt3a.blogspot.com/pic1a.jpg" alt="" />
<img class="midPic set1b" src="http://caprt3a.blogspot.com/pic1b.jpg" alt="" />
<img class="rightPic set1c" src="http://caprt3a.blogspot.com/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="http://caprt3a.blogspot.com/pic2a.jpg" alt="" />
<img class="midPic set2b" src="http://caprt3a.blogspot.com/pic2b.jpg" alt="" />
<img class="rightPic set2c" src="http://caprt3a.blogspot.com/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">Wine List</a>
<img class="leftPic set3a" src="http://caprt3a.blogspot.com/pic3a.jpg" alt="" />
<img class="midPic set3b" src="http://caprt3a.blogspot.com/pic3b.jpg" alt="" />
<img class="rightPic set3c" src="http://caprt3a.blogspot.com/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>
</div> <!-- end of info -->