<style type="text/css">
.menu {padding:0; margin:0; list-style:none; width:250px; position:relative; z-index:100; margin:50px auto; height:320px;}
.menu li {width:250px; height:40px; float:left;}
.menu li a {display:block; width:250px; height:100%; background:url(trans.gif);}
.menu li a span {position:absolute; left:-9999px;}
.menu li.icons {position:absolute; left:0; top:0; width:250px; height:240px; z-index:-1;}
.menu li.icons b {display:block; width:220px; height:40px; padding-left:20px; line-height:40px; 
font:normal 14px/40px arial, sans-serif; color:#d8d8d8; text-shadow:0 -1px 1px rgba(0,0,0,0.8); 
background-color:#800; border-radius:5px;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
transition:0.2s;
}
.menu li:hover {height:48px;  margin:-5px 0 0 0; width:276px; position:relative; z-index:100;}
.menu li.p2:hover {margin:-3px 0 0 0;}
.menu li.p3:hover {margin:-2px 0 0 0;}
.menu li.p4:hover {margin:-2px 0 0 0;}
.menu li.p5:hover {margin:-2px 0 0 0;}
.menu li.p6:hover {margin:-2px 0 0 0;}
.menu li.p7:hover {margin:-2px 0 0 0;}
.menu li.p8:hover {margin:-2px 0 0 0;}
.menu li.icons:hover {position:absolute; left:0; top:0; margin:0; width:250px; height:240px; z-index:-1;}
.menu li.p1:hover ~ li.icons b.m1,
.menu li.p2:hover ~ li.icons b.m2,
.menu li.p3:hover ~ li.icons b.m3,
.menu li.p4:hover ~ li.icons b.m4,
.menu li.p5:hover ~ li.icons b.m5,
.menu li.p6:hover ~ li.icons b.m6,
.menu li.p7:hover ~ li.icons b.m7,
.menu li.p8:hover ~ li.icons b.m8 {font-size:17px; height:48px; width:240px; line-height:48px; margin:-5px 0 -5px 16px; 
background-color:#c00; position:relative; z-index:10; box-shadow:0 0 20px rgba(0,0,0,0.6); color:#fff;}
.menu li.p1:hover ~ li.icons b.m2,
.menu li.p2:hover ~ li.icons b.m1,
.menu li.p2:hover ~ li.icons b.m3,
.menu li.p3:hover ~ li.icons b.m2,
.menu li.p3:hover ~ li.icons b.m4,
.menu li.p4:hover ~ li.icons b.m3,
.menu li.p4:hover ~ li.icons b.m5,
.menu li.p5:hover ~ li.icons b.m4,
.menu li.p5:hover ~ li.icons b.m6,
.menu li.p6:hover ~ li.icons b.m5,
.menu li.p6:hover ~ li.icons b.m7,
.menu li.p7:hover ~ li.icons b.m6,
.menu li.p7:hover ~ li.icons b.m8,
.menu li.p8:hover ~ li.icons b.m7 {font-size:16px; height:46px; width:232px; line-height:46px; margin:-4px 0 -4px 12px; 
background-color:#b00; position:relative; z-index:9; box-shadow:0 0 15px rgba(0,0,0,0.7); color:#f0f0f0;}
.menu li.p1:hover ~ li.icons b.m3,
.menu li.p2:hover ~ li.icons b.m4,
.menu li.p3:hover ~ li.icons b.m1,
.menu li.p3:hover ~ li.icons b.m5,
.menu li.p4:hover ~ li.icons b.m2,
.menu li.p4:hover ~ li.icons b.m6,
.menu li.p5:hover ~ li.icons b.m3,
.menu li.p5:hover ~ li.icons b.m7,
.menu li.p6:hover ~ li.icons b.m4,
.menu li.p6:hover ~ li.icons b.m8,
.menu li.p7:hover ~ li.icons b.m5,
.menu li.p8:hover ~ li.icons b.m6 {font-size:15px; height:44px; width:226px; line-height:44px; margin:-3px 0 -3px 8px; 
background-color:#a00; position:relative; z-index:8; box-shadow:0 0 10px rgba(0,0,0,0.8); color:#e8e8e8;}
.menu li.p1:hover ~ li.icons b.m4,
.menu li.p2:hover ~ li.icons b.m5,
.menu li.p3:hover ~ li.icons b.m6,
.menu li.p4:hover ~ li.icons b.m1,
.menu li.p4:hover ~ li.icons b.m7,
.menu li.p5:hover ~ li.icons b.m2,
.menu li.p5:hover ~ li.icons b.m8,
.menu li.p6:hover ~ li.icons b.m3,
.menu li.p7:hover ~ li.icons b.m4,
.menu li.p8:hover ~ li.icons b.m5 {font-size:14px; height:42px; width:222px; line-height:42px; margin:-2px 0 -2px 4px; 
background-color:#900; position:relative; z-index:7; box-shadow:0 0 5px rgba(0,0,0,0.9); color:#e0e0e0;}
</style>
<br><br>
<ul class ="menu">
<li class ="p1"><a href="#"><span>Promotional Items</span></a></li>
<li class ="p2"><a href="#"><span>Digital SLR Cameras</span></a></li>
<li class ="p3"><a href="#"><span>Zoom Lenses and Filters</span></a></li>
<li class ="p4"><a href="#"><span>Tripods and Monopods</span></a></li>
<li class ="p5"><a href="#"><span>Flashguns and Accessories</span></a></li>
<li class ="p6"><a href="#"><span>Photo Framing</span></a></li>
<li class ="p7"><a href="#"><span>Wedding Photography</span></a></li>
<li class ="p8"><a href="#"><span>Photograph Albums</span></a></li>
<li class ="icons">
    <b class ="m1">Promotional Items</b>
    <b class ="m2">Digital SLR Cameras</b>
    <b class ="m3">Zoom Lenses and Filters</b>
    <b class ="m4">Tripods and Monopods</b>
    <b class ="m5">Flashguns and Accessories</b>
    <b class ="m6">Photo Framing</b>
    <b class ="m7">Wedding Photography</b>
    <b class ="m8">Photograph Albums</b>
</li>
</ul>
<br><br><br>