google map e menu problema con css

**stefy81** · 30-12-2011, 12:09

Buongiorno,
io ho un menu a tendina su due livelli che funziona benissimo.
Ha solo un problema con la cartina di google map.
In poche parole quando passo con il mouse sopra al menu non mi si visualizza il sotto menu all'altezza della cartina do google map. Se al posto della cartina fi google map metto un immagine il menu torna a funzionare.
Ora vi posto il codice.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> 

<head>

	<link rel="stylesheet" type="text/css" href="css/style.css" />

	<link rel="stylesheet" type="text/css" href="css/menu.css" />

</head>

<body onload="load()" onunload="GUnload()">

	<div class="contenitore">

		<div class="contenuto">

			

			<div class="menu"><div class="manuPersonalizzato">

	<ul>

		[*]Home

		[*]

			Ristorante

			<ul>

				[*]Pizzeria

				[*]Men&ugrave; ristorante

				[*]Men&ugrave; cerimonie 

			[/list]

		

		[*]Hotel

			<ul>

				[*]Prezzi

				[*]Disponibilit&agrave;

			[/list]

		

		[*]Karaoke

		[*]Servizi

		[*]Gallery

		[*]Contatti

		[*]Dove Siamo

		[*]Mappa Sito

	[/list]

</div>

</div>

			<div class="mainEsterno">

				<div class="main">

					<div class="doveSiamo">

						<div id="map" style="width: 500px; height: 400px"></div>   

						<font>

							indirizzo
 indirizzo
Italia

						</font>

						

					</div>

				</div>

			</div>

		</div>

	</div>

</body>

</html>

Non ho inserito il codice javascript, se vi serve lo posto.
id due css sono

codice:

.menu {
	position: fixed;
	width: 140px;
	border-left:5px solid #cb162f;
}
.manuPersonalizzato, .manuPersonalizzato ul, .manuPersonalizzato li{
	padding:0;
	margin:0;
}
.manuPersonalizzato li{   
	list-style: none;
	position: relative;
	width:100px;
	height: 23px;
	padding:0 20px;
	background-color:#FFFACD;
	line-height: 23px;
	cursor:pointer;
}
.manuPersonalizzato li a{
	text-decoration:none;
	color:#38060D;
	font-weight:bold;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:1px;
}
.manuPersonalizzato li.more{
	border-left:5px solid #333333;
}
.manuPersonalizzato li li{
	background-color:#FFFACD;
	border-left:5px solid #cb162f;
	border-right:1px solid #cb162f;
	width: 130px;
}
.manuPersonalizzato li li a:FIRST-CHILD{
	color:#38060D;
}
.manuPersonalizzato li:hover{
	background-position:bottom;
	background-color:#F4A460;
}
.manuPersonalizzato li:hover a{
	color: #FFFFFF;
}
.manuPersonalizzato li:hover.more{
	border-left:5px solid #6D818A;
}
.manuPersonalizzato ul ul{
	position: absolute;
	top:0;
	left:140px;
	visibility:hidden;
}
.manuPersonalizzato ul li:hover ul ul, .manuPersonalizzato ul ul ul{
	position: absolute;
	top:0;
	left:170px;
	visibility:hidden;
}
.manuPersonalizzato li li:hover a{
	color: #FFFFFF;
}
.manuPersonalizzato li li li{
	width:150px;
	color:#38060D;
}
.manuPersonalizzato li li li:hover a:FIRST-CHILD{
	color:#FFFFFF;
}
.manuPersonalizzato li li li a:FIRST-CHILD{
	color:#38060D;
}
.manuPersonalizzato ul li:hover ul, .manuPersonalizzato ul ul li:hover ul{
	visibility:visible;
}

codice:

body {
	background: #F4A460 fixed center center;
	color: #38060D;
	-webkit-text-stroke: 1px transparent;
	-moz-text-stroke: 1px transparent;
	-o-text-stroke: 1px transparent;
	text-stroke: 1px transparent;
	word-wrap: break-word;
	margin: 0px;
	padding: 0px;
}
img{
	border-style: solid;
	border-color: #38060D;
	border-width: 5px;
	margin: 15px;
}
.contenitore {
	margin: auto;
	padding: 0px;
}
.contenuto {
	margin: 0 auto 25px;
	width: 950px;	
	height: 100%;
	padding: 0;
}
/*credits*/
.credits{
	background-color: #FFFACD;
	margin: 0;
	float: left;
	text-align: center;
	width: 100%;
	margin-top: 4px;	
}
.credits h2{
	font-weight: normal;
	font-size: 11px;
	letter-spacing: 1px;
	margin: 0px;
}
/*index*/
.mainEsterno {
	float: left;	
	width: 804px;
	background-color: #FFFACD;
	border-left:5px solid #cb162f;	
	min-height: 220px;
}
.main {
	float: left;	
	width: 804px;	
	margin-left: 140px;
	background-color: #FFFACD;
	border-left:1px solid #cb162f;
	vertical-align: middle;
	height: 100%;
	min-height: 220px;
}

Spero di essere riuscita a spiegare il mio problema.
Ciao ciao s tutti

**lucavizzi** · 30-12-2011, 16:13

Ciao Stefy81,
Il menu a tendina si espande tramite CSS o tramite uno javascript?
Ed il sottomenu, non si apre proprio oppure si posiziona "sotto" la Google Map?

**stefy81** · 30-12-2011, 16:59

Ciao,
il menù è fatto con il css. Il primo che ho postato. Non si apre proprio.

**lucavizzi** · 30-12-2011, 17:25

Pensavo che la funzione onload della Google Map sovrascrivesse la funzione onload del menu...

Prova con:

codice:

.manuPersonalizzato ul li:hover ul, .manuPersonalizzato ul ul li:hover ul{
	visibility:visible !important;
}

se non funziona dovresti postare un link alla pagina.

**stefy81** · 30-12-2011, 17:31

Non funziona

purtroppo è in locale

ciao ste

**lucavizzi** · 30-12-2011, 18:15

Prova ad aggiungere una position:relative ai link del menu:

codice:

.manuPersonalizzato li a {
	text-decoration:none;
	color:#38060D;
	font-weight:bold;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:1px;
	position:relative;
}

Con quali browser lo stai testando?

**stefy81** · 30-12-2011, 18:25

Ciao,
grazie, ma non funziona ancora

Sto testando con firefox, chrome e IE9

**lucavizzi** · 30-12-2011, 18:50

Molto probabilmente i sottomenu si dispongono sotto la mappa, prova a spostarla per verificare ed eventualmente setta degli z-index.

**stefy81** · 30-12-2011, 19:00

Grazieeeeeeeeeeeee,
così funziona

non avevo mai usato z-index. Grazie mille

**stefy81** · 30-12-2011, 19:01

ah l'ho messo qui

codice:

.manuPersonalizzato, .manuPersonalizzato ul, .manuPersonalizzato li{
	padding:0;
	margin:0;
        z-index: 10;
}

Discussione: google map e menu problema con css

Strumenti discussione

Ricerca discussione

Visualizza

google map e menu problema con css

Permessi di invio