Galeria fotografica

[gVenom]

Hola amigos del foro

Tengo un problemilla, me baje una galeria fotografica muy buena en css, la alteré hasta el punto de adaptarla a mi gusto(con muchas dificultades de hecho), el problema es que necesito usar la misma galeria en la misma pagina pero unas lineas mas abajo. La galeria es una pestaña o tab que al pasar el mouse despliega 20 fotografias en orden usando los <ul><li> como esta de aqui:
http://www.cssplay.co.uk/menu/lightbox
solo que sin bordes de color, totalmente transparente, y se oculta al quitar el mouse, debajo de esta galeria hay texto escrito, y la galeria lo tapa al abrirse, eso esta bien, pero no tapa los nombres de las pestañas de la siguiente galeria, si no que lo deja encima de las fotos, y ese es el problema.
trate de explicarme lo mejor que pude, ahi les dejo el codigo que se usa:



<style type="text/css">



/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {
padding:0;
margin:0;
list-style:none;
width:635px;
height:auto;
position:relative;
z-index:10;
}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:13px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; font-family:Comic Sans MS}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}



.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; width:464px; padding:40px 60px; z-index:1;}


.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; width:464px; padding:40px 60px; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #000; margin:0px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
.style1 {
font-family: "Comic Sans MS";
font-size: 18px;
color:#FF0000;
}
.style2 {
font-family:"Comic Sans Ms";
font-size:14px;
color:#000000;
font-weight:bold;
}
.style3 {
font-family:"comic Sans Ms";
font-size:14px;
color:#0000FF;
font-weight:bold;
}
.style5 {
font-weight: bold;
font-family: "Comic Sans MS";

}
</style>



y asi va el orden de las fotos en el body del html:

<div class="photo">
<ul class="topic">
<li><a class="set" href="fotos/en_adopcion"><strong>Galeria 1</strong></a>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>
<li><strong><a href="fotos/en_adopcion/imag_01.jpg"><img src="fotos/en_adopcion/imag_01.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_02.jpg"><span><img src="fotos/en_adopcion/imag_02.jpg" alt="probando" title="probando"/><br />Warm to Cold</span></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_03.jpg"><img src="fotos/en_adopcion/imag_03.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_04.jpg"><img src="fotos/en_adopcion/imag_04.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_05.jpg"><img src="fotos/en_adopcion/imag_05.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_06.jpg"><img src="fotos/en_adopcion/imag_06.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_07.jpg"><img src="fotos/en_adopcion/imag_07.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_08.jpg"><img src="fotos/en_adopcion/imag_08.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_09.jpg"><img src="fotos/en_adopcion/imag_09.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_10.jpg"><img src="fotos/en_adopcion/imag_10.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_11.jpg"><img src="fotos/en_adopcion/imag_11.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_12.jpg"><img src="fotos/en_adopcion/imag_12.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_13.jpg"><img src="fotos/en_adopcion/imag_13.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_14.jpg"><img src="fotos/en_adopcion/imag_14.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_15.jpg"><img src="fotos/en_adopcion/imag_15.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_16.jpg"><img src="fotos/en_adopcion/imag_16.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_17.jpg"><img src="fotos/en_adopcion/imag_17.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_18.jpg"><img src="fotos/en_adopcion/imag_18.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_19.jpg"><img src="fotos/en_adopcion/imag_19.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_20.jpg"><img src="fotos/en_adopcion/imag_20.jpg" alt="" title="" /></a></strong></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


a proposito tampoco logro desplegar texto con las fotos, terrible ah...