Gestire posizionamento voci sottomenu che si nascondono

[asevenx]

Salve, ho un problema con un menu (realizzato con gli elenchi <ul>) dove le voci del sottomenu si dovrebbero aprire a tendina. Il problema è che al passaggio del mouse il sottomenu si posiziona in modo errato e si nasconde dietro alle immagini che ho inserito nel sito. Per capire di cosa sto parlando posto il link del sito: http://testsitifederico.altervista.org/2laghi/index.php. Ovviamnte il menu in questione è quello in alto, ho usato dei colori provvisori a forte contrasto per rendere più visibile il problema.

Mentre la struttura del menu è questa

<div id="navbar">

	<div id="nav1">
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#" class="selected">Albergo</a>
				<ul>
					<li><a href="#">Camera</a></li><br />
					<li><a href="#">Piscina</a></li><br />
					<li><a href="#">Tariffe</a></li><br />
					<li><a href="#">Offerte</a></li><br />
					<li><a href="#">Booking</a></li>
				</ul>	
			</li>
			<li><a href="#">Ristorante</a>
				<ul>
					<li><a href="#">Ristorante</a></li><br />
					<li><a href="#">Menù</a></li><br />
					<li><a href="#">Cerimonie</a></li><br />
					<li><a href="#">Giornate speciali</a></li>		
				</ul>			
			</li>
			<li><a href="#">Centro Benessere</a></li>
		</ul>
		
	</div>
	
	<div id="nav-logo"></div>
	
	<div id="nav2">	

		<ul id="nav">
			<li><a href="#">Azienda Agricola</a>
				<ul>
					<li><a href="#">Listino</a></li>
				</ul>	
			</li>		
			<li><a href="#">Eventi</a>
				<ul>
					<li><a href="#">Sale</a></li><br />
					<li><a href="#">Tariffe</a></li><br />
					<li><a href="#">Offerte</a></li>		
				</ul>
			</li>
			<li><a href="#">Sport</a>
				<ul>
					<li><a href="#">Club ippico</a></li><br />
					<li><a href="#">Golf</a></li><br />
					<li><a href="#">Diving</a></li><br />
					<li><a href="#">Altri sport</a></li>		
				</ul>			
			</li>
			<li><a href="#">Escursioni</a>
				<ul>
					<li><a href="#">Tour della Tuscia</a></li><br />
					<li><a href="#">Mercatini</a></li>		
				</ul>			
			</li>	
		</ul>

	</div>
	
	<div class="clear"></div>
</div>

e del CSS

#navbar{
	background: url('../img/bg-nav.png');
	height:59px;
	background-repeat: repeat-x;
	max-width:1007px;
	padding:0px
}

#nav1, #nav2{
	width:430px;
	height:59px;
	float:left;
	background:orange;
}

#nav1{
	padding-left:0px;
}

#nav2{
	padding-right:0px
}

#nav-logo{
	background: url('../img/banner-logo-2.png');
	background-position:center; 
	width:147px;
	height:59px;
	float:left;		
}

#nav ul {
	position:absolute; 
	display:none; 
	padding:0px; 	
	margin:0px;
}
	
	
#nav li {
	font-family:'Monotype Corsiva';
	font-size:20px;	
	text-align:center;
	padding:16px 10px 0px 10px;
	float:left; 
	display:block;
	
	background:yellow;
	border-left:1px black solid;	
}

#nav li a {
	color:#3c3c3c;
	text-decoration:none;  
}

#nav li a:hover {
	color:#111;
}

#nav ul li {
	background:red;
	width:150px;	
	padding:0px;
	text-align:left;
	position:static;
}

Inoltre ho un altro problema. Come posso eliminare lo spazio che si viene a creare sulla sinistra dei due elenchi?

Grazie a tutti per l'aiuto.

 

[asevenx]

Dopo diversi tentativi sono riuscito a sovrapporre i sottomenu. Ora mi resta l'eliminazione dello spazio a sinistra degli elenchi. Qualcuno può aiutarmi?

Il nuovo CSS

#navbar{
	background: url('../img/bg-nav.png');
	height:59px;
	background-repeat: repeat-x;
	max-width:1007px;
	padding:0px
}

#nav1, #nav2{
	width:430px;
	height:59px;
	float:left;
	background:orange;
}

#nav1{
	padding-left:0px;
}

#nav2{
	padding-right:0px
}

#nav-logo{
	background: url('../img/banner-logo-2.png');
	background-position:center; 
	width:147px;
	height:59px;
	float:left;		
}

#nav ul {
	position:relative; 
	display:none; 
	padding:0px; 	
	margin:0px;
}
	
	
#nav li {
	font-family:'Monotype Corsiva';
	font-size:20px;	
	text-align:center;
	padding:16px 10px 0px 10px;
	float:left; 
	display:block;
	position:relative;
	background:yellow;
	border-left:1px black solid;	
}

#nav li a {
	color:#3c3c3c;
	text-decoration:none;  
}

#nav li a:hover {
	color:#111;
}

#nav ul li {
	background:red;
	position:absolute ;
	z-index:1; 	
	width:150px;	
	padding:0px;	
	text-align:left;
}