Menu fotográfico

Coloque em seu blog um menu como ESTE em seu blog usando apenas CSS, sem hospedar script. Copie o código, cole no HTML/Javascript e faça as modificações necessárias.

DEMO

<style>
/* Menu-----------------------------------------------*/
#holder { width:750px;
 height:350px;
 position:relative;
 font-family:arial, sans-serif;
 border:0px solid #004479;
z-index:100;
}
#holder table {
border-collapse:collapse; margin:-1px;
}
#holder ul {
float:left; padding:0; margin:0; list-style:none;
}
#holder ul.sub {
margin-bottom:-4px;
}
#menuOuter li a.lv1-a {
background:blue; zoom:1;
}
#menuOuter li a.lv1-a:hover {
direction:ltr;
}

#holder ul.sub {
float:left;
}
#holder ul.sub ul {
position:absolute;
 left:-9999px;
top:180px;
}
#holder ul.sub li.sub-li a img {
display:block;
position:absolute;
left:-9999px;
border:0;
height:200px;
width:750px;
}

#holder ul.sub li.sub-li {
display:block;
float:left;
 width:150px;
height:240px;
}
#holder ul.sub li.sub-li a {
margin-top:200px;
width:110px;
display:block;
padding:0 20px;
height:40px;
line-height:40px;
color:#fff;
 text-decoration:none;
font-family:arial, sans-serif; font-size:14px;
}
#holder ul.sub li.sub-li a.a1 {
background:#cccccc;
}
#holder ul.sub li.sub-li a.a2 {
background:#808080;
}
#holder ul.sub li.sub-li a.a3 {
background:#404040;
}
#holder ul.sub li.sub-li a.a4 {
background:#373737;
}
#holder ul.sub li.sub-li a.a5 {
background:#000000;
}

#menuOuter li:hover ul.sub li.current a {
margin-top:200px;
height:40px;
}
#menuOuter li:hover ul.sub li.current ul {
left:-9999px;
}
#menuOuter li:hover ul.sub li.current a img {
left:-9999px;
}

#menuOuter a:hover ul.sub li.current a {
margin-top:200px;
height:40px;
}
#menuOuter a:hover ul.sub li.current ul {
left:-9999px;
}
#menuOuter a:hover ul.sub li.current a img {
left:-9999px;
}

#holder ul.sub li.sub-li:hover > a {
margin-top:0; height:350px;
}
#holder ul.sub li.sub-li a:hover {
margin-top:0;
height:350px;
}

#holder ul.sub li.current a {margin-top:0; height:350px;}
#holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;}
#menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;}
#menuOuter li:hover ul.sub li.current:hover ul {left:0;}
#menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;}
#menuOuter a:hover ul.sub li.current a:hover ul {left:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}

#holder ul.sub li {position:relative;}
#holder ul.sub li.sub-li:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;}

#holder ul.sub li.sub-li a:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;}

#holder ul.sub li.current ul {left:0; width:130px;}
#holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}

#holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#fff; text-decoration:none; font-size:11px;}
#holder ul.sub li.p1 span {background:#cccccc;}
#holder ul.sub li.p2 span {background:#808080;}
#holder ul.sub li.p3 span {background:#404040;}
#holder ul.sub li.p4 span {background:#373737;}
#holder ul.sub li.p5 span {background:#000000;}
</style>

<div id='holder'>
<ul id='menuOuter'>
<li class='lv1-li'>
<!--[if lte IE 6]><a class="lv1-a" href="#url1"><table><tr><td><![endif]-->
<ul class='sub'>
<li class='sub-li p1'><a class='a1' href='#url'><img src=' ENDEREÇO DA IMAGEM 1'/><b>TÍTULO 1</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> <ul>
<li><a href='#url'>LINK 1</a></li>
<li><a href='#url'>LINK 2</a></li>
<li><a href='#url'>LINK 3</a></li>
<li><a href='#url'>LINK 4</a></li>
<li><a href='#url'>LINK 5</a></li>
</ul>
<span>Escreva algo sobre a imagem 1</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class='sub-li p2'><a class='a2' href='#url'><img src='ENDEREÇO DA IMAGEM 2'/><b>TÍTULO 2</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='#url'>LINK 6</a></li>
<li><a href='#url'>LINK 7</a></li>
<li><a href='#url'>LINK 8</a></li>
<li><a href='#url'>LINK 9</a></li>
<li><a href='#url'>LINK 10</a></li>
</ul>
<span>ESCREVA ALGO SOBRE A IMAGEM 2</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class='sub-li p3'><a class='a3' href='#url'><img src='ENDEREÇO DA IMAGEM  3'/><b>TÍTULO 3</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='#url'>LINK 11</a></li>
<li><a href='#url'>LINK 12</a></li>
<li><a href='#url'>LINK 13</a></li>
<li><a href='#url'>LINK 14</a></li>
<li><a href='#url'>LINK 15</a></li>
</ul>
<span>ESCREVA ALGO SOBRE A IMAGEM 3</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class='sub-li p4'><a class='a4' href='#url'><img src='ENDEREÇO DA IMAGEM  4'/><b>TITULO 4</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='#url'>LINK 16</a></li>
<li><a href='#url'>LINK 17</a></li>
<li><a href='#url'>LINK 18</a></li>
<li><a href='#url'>LINK 19</a></li>
<li><a href='#url'>LINK 20</a></li>
</ul>
<span>ESCREVA ALGO SOBRE A IMAGEM 4</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class='sub-li p5 current'><a class='a5' href='#url'><img src='ENDEREÇO DA IMAGEM  5'/><b>TITULO 5</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href='#url'>LINK 21</a></li>
<li><a href='#url'>LINK 22</a></li>
<li><a href='#url'>LINK 23</a></li>
<li><a href='#url'>LINK 24</a></li>
<li><a href='#url'>LINK 25</a></li>
</ul>
<span>ESCREVA ALGO SOBRE A IMAGEM 5</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>