Gestire posizionamento voci sottomenu che si nascondono

asevenx

Utente Attivo
7 Nov 2009
312
0
16
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
HTML:
<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
Codice:
#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

Utente Attivo
7 Nov 2009
312
0
16
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
Codice:
#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;
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
L Interfaccia grafica per gestire sql server .NET Framework 1
R Plugin per Gestire videocorsi a pagamento WordPress 3
M Come gestire aggiornamenti e modifiche di sito live Content Management System (CMS) 0
S Gestire scelta dropdown con dati da Mysql PHP 2
Tommy03 Gestire dimensioni immagini PHP 4
D Come gestire un singolo checkbox PHP 10
MarcoGrazia Gestire lista campi vuoti in fase di autenticazione jQuery 1
elpirata Gestire permessi accesso alle pagine PHP 3
A [ASP.Net] Gestire il profilo ADMIN in un progetto ASP NET e pattern MVC ASP.NET 0
M [PHP] Come gestire gli utenti online PHP 9
M [php] Come gestire i tags PHP 1
svtmaster professionalità per gestire sito web Offerte e Richieste di Lavoro e/o Collaborazione 4
L [HTML] Gestire movimento GIF HTML e CSS 0
BestSellerMauroTop Software per gestire tanti profili e pagine, e farle crescere in modo autonomo! Annunci servizi di Social Media Marketing 0
W Gestire ccTalk o libreria c++ da php PHP 0
W [PHP] gestire una richiesta curl sul server PHP 0
W Piccolo sistema per gestire alcune periferiche, Java o altro linguaggio? Java 8
bubino8 [WordPress] Gestire SSL (https://) da .htaccess WordPress 9
C [WordPress] Creare e gestire un nuovo sito web WordPress 5
M Gestire ErrorDocument 404 mantenendo lo stesso url Web Server 0
S gestire una tabella mysql PHP 9
R gestire il ritorno di una variabile con success Ajax 2
S Gestire Motion Detection TP-LINK CAMERA NC200 IP Cam e Videosorveglianza 0
A [Javascript] [HTML] Gestire una pagina esterna con 2 iframe Javascript 4
webmachine [PHP] gestire rinnovi PHP 1
P Gestire accesso ad un file xml pubblico PHP 1
D Gestire diversi tipi di pagamento per tipologia di cliente E-Commerce 4
asevenx Cerco plugin per gestire appuntamenti con agenda e campi di selezione WordPress 4
matteoraggi Software per gestire migliaia di permament redirect? SEO e Posizionamento 0
K Gestire response con servlet remota Sviluppo app per Android 1
P Piccolo software per gestire gli utenti. Snippet PHP 5
F Gestire data e ora PHP 6
D Gestire firme digitali con PHP PHP 0
C [Facebook Autolike]Software per gestire più account, mandare like, creare stati, amicizie e altro.. Vendere e Acquistare pubblicita' online 0
D gestire commenti e risposte ... PHP 3
L Gestire password utenti registrati. Quale codifica? PHP 23
N Programma per gestire Cookies secondo disposizioni del Garante Privacy 3/6/2014 G.U. 126 Leggi, Normative e Fisco 0
A Gestire e modificare immagini Java 2
M Gestire la chiusura forzata. Sviluppo app per Android 1
L Sito con doppia lingua. Gestire il cambio PHP 4
felino Wordpress e QTranslate: come gestire i widget WordPress 11
IImanuII Gestire lingua su facebook con php PHP 18
mondrian Gestire un web server su una virtualbox Apache 12
L gestire array per radio-checkbox in ciclo while PHP 2
MarcoGrazia Gestire gruppi e categorie di link con PHP PHP 1
L Button per gestire JS in WebBrowser di VBNet .NET Framework 0
A gestire errori 400-401-403-404-500 con file htaccess PHP 0
L classe per gestire login in mysql PHP 1
R Gestire sito creato da un altro webmaster HTML e CSS 10
N Gestire i prodotti con php e database PHP 5

Discussioni simili