Ho due colonne, una a destra e una a sinistra, in base a dove l'utente passa il mouse viene visualizzata un'immagine al centro.
Il problema è che la fila di sinistra funziona, invece quella di destra no, si va a sovrapporre.
Ecco il mio codice...spero che riuscirete ad aiutarmi.

Codice Html
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
		<title> Karina </title> 
		<link rel="stylesheet" media="screen" href="karina_vertical_gallery.css" type="text/css" /> 
		
		<script type="text/javascript"><![CDATA[//><!--
 
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
 
//--><!]]></script> 
 
	</head> 
	<body> 
	<div id="container"> 
		<div id="header"><h1>Galleria
        Fotografica</h1> 
		</div> 
		
		<div id="fascettina"></div> 
		
		<div id="navigation"> 
					<ul id="nav"> 
						<li class="active">Pic 1 
							<ul> 
								[*][img]161ib8o.jpg[/img] 
							[/list]
						 
						[*]Pic 2 
							<ul> 
								[*][img]stradeincantate007.jpg[/img] 
							[/list]
						 
						[*]Pic 3 
							<ul> 
								[*][img]images/tre.jpg[/img] 
							[/list]
						 
						[*]Pic 4 
							<ul> 
								[*][img]images/04.jpg[/img] 
							[/list]
						 
						[*]Pic 5 
							<ul> 
								[*][img]images/05.jpg[/img] 
							[/list]
						 
						[*]Pic 6 
							<ul> 
								[*][img]images/06.jpg[/img] 
							[/list]
						 
						[*]Pic 7 
							<ul> 
								[*][img]images/07.jpg[/img] 
							[/list]
						 
						[*]Pic 8 
							<ul> 
								[*][img]images/08.jpg[/img] 
							[/list]
						 
						[*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 [*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 [*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 [*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 [*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 [*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						[*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 
                        
					[/list]
		</div>        
        
        
         <div id="navigation2"> 
					<ul id="nav"> 
						<li class="active">[img]161ib8o.jpg[/img]Pic 1 
							<ul> 
								[*][img]161ib8o.jpg[/img] 
							[/list]
						 
						[*]Pic 2 
							<ul> 
								[*][img]161ib8o.jpg[/img] 
							[/list]
						 
						[*]Pic 3 
							<ul> 
								[*][img]images/tre.jpg[/img] 
							[/list]
						 
						[*]Pic 4 
							<ul> 
								[*][img]images/04.jpg[/img] 
							[/list]
						 
						[*]Pic 5 
							<ul> 
								[*][img]images/05.jpg[/img] 
							[/list]
						 
						[*]Pic 6 
							<ul> 
								[*][img]images/06.jpg[/img] 
							[/list]
						 
						[*]Pic 7 
							<ul> 
								[*][img]images/07.jpg[/img] 
							[/list]
						 
						[*]Pic 8 
							<ul> 
								[*][img]images/08.jpg[/img] 
							[/list]
						 
						[*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 [*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 [*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 [*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 [*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 [*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						[*]Pic 9 
							<ul> 
								[*][img]images/09.jpg[/img] 
							[/list]
						 
                        
					[/list]
		</div> 
		<div id="footer">SAITEC</div> 
 
</div>		
</body> 
</html>
Codice CSS
codice:
/* karina -  galleria di immagini via css
implementazione basata sul codice del menu css dropdown:
http://www.circolab.net/~carloz/test_css/newdrop.html
carloz at gnumerica.org - Giugno 2007 */

/*pagina e div principali */
html, body{
	margin: 0;
	padding: 0;
}

body{
	font-family: verdana, arial, sans-serif;
	font-size: 100%;
	
}

#container{
	margin: 20px auto;
	width: 790px;
	height: 800px;
	border: 1px  solid #03F; 
	background: #FFF;
}

#header{
	height: 45px;
	
}

#header h1{
	margin: 0;
	padding: 5px;
	text-align: center;
	font-family: book antiqua;
	font-size: 200%;
	color: #F00;
		font-weight: normal;
	
}

#fascettina{
	height: 15px;
	background: #03F; 
	
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/*il div in cui vado a posizionare il menu*/
/*ne approfitto per usarlo come sfondo*/
#navigation{float:left;

	position: relative;
	width: 150px;
	margin: 0;
	padding:2px;
	font-size: 92%;
	}



#footer{
	float: right;
	width: 76%;
	height: 12px;
	background-color: #F00;
	margin-top: -60px;
	color: #fff;
	font-size: 10px;
	line-height: 0.7em;
	text-align: right;
	padding: 3px 10px 1px 0;
	border: 1px solid #ccc;
	}


/*LA LISTA*/

/* tutto su riga singola */
#navigation ul{
	list-style: none;
	margin: 20px 0 0 20px;
	padding: 0;
	/* uso line-height per aumentare l'altezza degli item 
	e mantenere centrato verticalmente il testo*/
	line-height: 2.2em;
	text-align: center;
	border-bottom: 1px solid #F00;
}

/*PRIMO LIVELLO*/

/*gli elementi della lista,*/
#navigation ul li{
	padding: 0;
	margin: 0;
	border: 1px solid #F00;
	border-bottom: none;
}

/*espando i link interni agli elementi della lista*/
#navigation ul li a{
	position: relative;
	display: block;
	width: 100%;
	height:100%;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: #777;
	font-style: italic;
}


/* I LINK*/


/*stato :hover degli elementi di primo livello del menu 
- quando ci passo sopra cambia colore lo sfondo*/
/*colore del testo del link dentro gli elementi di primo livello, stato hover*/
#navigation ul li a:hover{
	outline: none;
	background-color: #fcc;
	color: #333;
}

/*evidenzio il link attivo - iniziale */

#navigation ul li.active{
	font-weight: bold;
}


/*SECONDO LIVELLO*/

/*vado a posizionare sulla stessa linea anche gli elementi delle sottoliste*/
/*e IMPORTANTE: nascondo le sottoliste, associate ai diversi item di primo livello*/

#navigation ul li ul{
	display: none;
	position: absolute;
	margin: 0;
	padding: 0;
	left: 260px;
	top: 20px;
	line-height: 0.7em;
	border-bottom: none;
}

/*proprieta' degli elementi delle sottoliste*/

#navigation ul li ul li{
	
	float: left;
	/*display: inline;*/
	margin: 0;
	padding: 2px;
	border: 1px solid #777;
	background:#fcc;
}

#navigation ul li ul li img{
	margin: 0;
	padding: 0;
	border: none;
}

/* Fix per IE, ripreso da suckerfish dropdown.  dichiaro altezza - minima(le) - degli elementi*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
*html ul{height: 270px;}
/* End */


/*mostro le sottoliste al passaggio del mouse sul relativo elemento di primo livello*/
#navigation ul li:hover ul, #navigation ul li.over ul{
	display: block;
	z-index: 1;
}		


/*mostro il sottolivello dell'item di primo livello attivo*/
#navigation ul li.active ul{
	display: block;
	z-index: 0;
}


#navigation ul li a:hover{
	font-weight: bold;
}






/* Fix per IE, ripreso da suckerfish dropdown.  dichiaro altezza - minima(le) - degli elementi*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
*html ul{height: 270px;}
/* End */


/*mostro le sottoliste al passaggio del mouse sul relativo elemento di primo livello*/
#navigation ul li:hover ul, #navigation ul li.over ul{
	display: block;
	z-index: 1;
}		


/*mostro il sottolivello dell'item di primo livello attivo*/
#navigation ul li.active ul{
	display: block;
	z-index: 0;
}


#navigation ul li a:hover{
	font-weight: bold;
}
#footer a{
	color: #fff;
	text-decoration: none;
}

#footer a:hover{
	color: #fff;
}



/*Navigation 2 By marcello*/

#navigation2 {float:right;

	position: relative;
	width: 150px;
	margin: 0;
	padding:2px;
	font-size: 92%;
	}


#navigation2 ul{
	list-style: none;
	margin: 20px 0 0 20px;
	padding: 0;
	/* uso line-height per aumentare l'altezza degli item 
	e mantenere centrato verticalmente il testo*/
	line-height: 2.2em;
	text-align: center;
	border-bottom: 1px solid #F00;
}

/*PRIMO LIVELLO*/

/*gli elementi della lista,*/
#navigation2 ul li{
	padding: 0;
	margin: 0;
	border: 1px solid #F00;
	border-bottom: none;
}

/*espando i link interni agli elementi della lista*/
#navigation2 ul li a{
	position: relative;
	display: block;
	width: 100%;
	height:100%;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: #777;
	font-style: italic;
}


/* I LINK*/


/*stato :hover degli elementi di primo livello del menu 
- quando ci passo sopra cambia colore lo sfondo*/
/*colore del testo del link dentro gli elementi di primo livello, stato hover*/
#navigation2 ul li a:hover{
	outline: none;
	background-color: #fcc;
	color: #333;
}

/*evidenzio il link attivo - iniziale */

#navigation2 ul li.active{
	font-weight: bold;
}


/*SECONDO LIVELLO*/

/*vado a posizionare sulla stessa linea anche gli elementi delle sottoliste*/
/*e IMPORTANTE: nascondo le sottoliste, associate ai diversi item di primo livello*/

#navigation2 ul li ul{
	display: none;
	position: absolute;
	margin: 0;
	padding: 0;
	left: -376px;
	top: 20px;
	line-height: 0.7em;
	border-bottom: none;
}

/*proprieta' degli elementi delle sottoliste*/

#navigation2 ul li ul li{
	
	float: left;
	/*display: inline;*/
	margin: 0;
	padding: 2px;
	border: 1px solid #777;
	background:#fcc;
}

#navigation2 ul li ul li img{
	margin: 0;
	padding: 0;
	border: none;
}
/*mostro le sottoliste al passaggio del mouse sul relativo elemento di primo livello*/
#navigation2 ul li:hover ul, #navigation ul li.over ul{
	display: block;
	z-index: 1;
}		


/*mostro il sottolivello dell'item di primo livello attivo*/
#navigation2 ul li.active ul{
	display: block;
	z-index: 0;
}


#navigation2 ul li a:hover{
	font-weight: bold;
}
#navigation2 ul li:hover ul, #navigation ul li.over ul{
	display: block;
	z-index: 1;
}		


/*mostro il sottolivello dell'item di primo livello attivo*/
#navigation2 ul li.active ul{
	display: block;
	z-index: 0;
}


#navigation2 ul li a:hover{
	font-weight: bold;
}
[/code]