Sottomenù sovrapposti con IE (z-index)

**_lerio_** · 27-07-2006, 11:28

Ciao a tutti!
Ho un problema con la creazione di un menu: in pratica vorrei fare in modo che al rollover del mouse mi compaia il sottomenu che si sovrapponga a quello che sto scorrendo. il tutto funziona correttamente su FF, Opera, Safari mentre su IE6 il sottomenu si "mischia" in modo strano con quello sottostante.

(Menu con Firefox - OK)

(Menu con IE - Sbagliato)

Per rendere il livello sottostante nascosto utilizzo la proprietà z-index in questo modo:

codice:

li ul{
	position: absolute;
	left: 50px;
	top: 20px;
	display: none;
	z-index: 9999;
}

Ma sembra che IE se ne freghi altamente della proprietà...
Qualcuno saprebbe indicarmi come correggere l'errore si Internet Explorer?

GRAZIE!

**Mich_** · 27-07-2006, 11:42

Dovresti postare anche il CSS della prima lista (quella sempre visualizzata - c'e` uno z-index?) e il CSS della lista in versione :hover.
Posta pure il codice HTML (o almeno un estratto) e il DOCTYPE.

**_lerio_** · 27-07-2006, 11:55

Grazie per la veloce risposta. Ecco tutto il codice utilizzato:
HTML:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
<div id="list">
   <ul>[*]Duis felis tellus
      <ul>[*]SottoCategoria1[*]SottoCategoria2[/list]
      [*]Vouptat ut
</div>
</body>
</html>

In realtà la lista è articolata in più livelli, ma ho preferito postare solo il codice relativo all'immagine allegata nel post precedente

CSS:

codice:

body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #000;
	color: #ccc;
}

ul{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
}

ul li{
	position: relative;
}
	
li ul{
	position: absolute;
	left: 50px;
	top: 20px;
	display: none;
	z-index: 9999;
}

ul li a{
	display: block;
	text-decoration: none;
	background-color: #000;
	color: #ccc;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul, ul ul{
	margin: 0;
	padding: 0;
}

ul ul, ul li:hover ul ul{
	display: none;
}

ul li:hover ul, ul ul li:hover ul{
	display: block;
}

L'ultima parte del codice CSS è scritto in modo da visualizzare a cascata 3 livelli di sottomenù, anche se in realtà l'esempio delle immagini e del codice HTML ne riportano solo 2.

GRAZIE!

**Mich_** · 27-07-2006, 12:21

Alcune considerazioni:
Quando c'e` display: none;, lo z-index non ha significato; prova ad inserire lo z-index corretto quando dichiari display:block;

Non dichiari z-index nel primo menu (quello sempre aperto): questo potrebbe trarre in inganno qualche browser.

Utilizzi la pseudolcasse :hover su un[*]: questo non e` riconosciuto da IE (:hover funziona solo in un <a> o <area>)

Il codice HTML non e` corretto (mancano alcuni tag di chiusura - ma forse e` opera dei tagli che hai fatto).

In caso di piu` di due livelli, avrai bisogno di tre livelli di z-index: ti consiglierei di usare numeri comodi e (relativamente) piccoli, tipo 10, 20, 30, ...

Quando fai le modifiche fanne una alla volta, e verifica di volta in volta.
Poi facci sapere.

**_lerio_** · 27-07-2006, 12:49

Quando c'e` display: none;, lo z-index non ha significato; prova ad inserire lo z-index corretto quando dichiari display:block;
Non dichiari z-index nel primo menu (quello sempre aperto): questo potrebbe trarre in inganno qualche browser.

Ok, ho modificato il codice CSS in questo modo:

codice:

body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #000;
	color: #ccc;
}

ul{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	z-index: 10;
}

ul li{
	position: relative;
}
	
li ul{
	position: absolute;
	left: 50px;
	top: 20px;
	display: none;
}

ul li a{
	display: block;
	text-decoration: none;
	background-color: #000;
	color: #ccc;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul, ul ul{
	margin: 0;
	padding: 0;
}

ul ul, ul li:hover ul ul{
	display: none;
}

ul li:hover ul{
	display: block;
	z-index: 20;
}

ul ul li:hover ul{
	display: block;
	z-index: 30;
}

Utilizzi la pseudolcasse :hover su un[*]: questo non e` riconosciuto da IE (:hover funziona solo in un <a> o <area> )

con questo script (non non avevo mostrato in precedenza risolvo quel problema):

codice:

<style type="text/css">
	body{
		behavior: url("../javascript/csshover.htc");
	}
</style>

Il codice HTML non e` corretto (mancano alcuni tag di chiusura - ma forse e` opera dei tagli che hai fatto).

Esatto, per questo a scanso di equivoci ti posto tutto il codice HTML:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>level0</title>
<link href="css/stili.css" type="text/css" rel="stylesheet" />
<meta name="description" content="level0" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<script src="/javascript/ajax.js" type="text/javascript"></script>
<style type="text/css">
	body{
		behavior: url("../javascript/csshover.htc");
	}
</style>
</head>
<body>
<div id="list">
	<ul>
	[*]Duis felis tellus
	<ul>
		[*]SottoCategoria1
		<ul>
			[*]Prodotto1
		[/list]
		
		[*]SottoCategoria2
	[/list]
	
	[*]Vouptat ut
	<ul>
		[*]SottoCategoria3
		[*]SottoCategoria4
		<ul>
			[*]Prodotto2
		[/list]
		
	[/list]
	
	[/list]
</div>
</body>
</html>

Nonostante ciò però continua a non funzionare:

firefox ok

ie no

Grazie.

**Mich_** · 27-07-2006, 13:59

L'unica cosa che non mi piace e` quella specie di hack, che trasforma qualche blocco in float.
Secondo i consigli piu` recenti, andrebbe fatto con i commenti condizionali. Intanto prova ad eliminarlo/commentarlo.

Se non e` quello, non saprei dirti cos'altro non va.

**_lerio_** · 27-07-2006, 14:03

Ok, ho tolto l'hack, ma adesso giustamente IE non mostra più i sottomenu (perchè evidentemente non riconosce più la pseudoclasse :hover).
Mi sapresti consigliare un altro metodo per visualizzare un dropdown menu con IE che non sia attraverso l'uso di quel file .htc?

GRAZIE

**Mich_** · 27-07-2006, 14:20

codice:

HTML:
<ul id="list"> [*]apri sottomenu 1
    <ul>[*]sottom 1 - linea 1[*]sottom 1 - linea 2
      ...[/list][*]apri sottomenu 2
  ...[/list]

CSS:
#list { 
  ...
}
#list a {
  color: blue;
}
#list a:hover {
  color: red;
}
#list a ul {
  display: none;
}
#list a:hover ul {
  display: block;
}

Spero che riesci ad implementarlo.
Altrimenti cerca tra i menu dei "link utili".

**_lerio_** · 27-07-2006, 14:42

Ho provato a copiare il tuo codice così com'è adattandolo e correggendolo ma evidentemente manca qualcosa visto che il menù mi compare già esploso e al click non succede niente.

su link utili ho trovato solo pubblicità. sapresti indicarmi un sito su come implementare da zero questi tipi di menu a comparsa sovrapposti?

GRAZIE

**_lerio_** · 27-07-2006, 14:44

come non detto: sto guardando il post 'link utili' ,mentre prima guardavo le inserzioni sulla homepage..

Discussione: Sottomenù sovrapposti con IE (z-index)

Strumenti discussione

Ricerca discussione

Visualizza

Sottomenù sovrapposti con IE (z-index)

Permessi di invio