Aiuto con menu a div !

[hutton]

Salve a tutti,

Spero di riuscire a spiegarmi xchè è un pò complicato ... allora io ho la pagina principale formata da 3 div:

<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>

Nel div "header" è presente un menù orizzontale dove alcune voci hanno un sottomenu con div posizionati in modo assoluto che si spengo e si accendo a seconda se sei sopra al suddetto link o meno.
Fin qui niente di anomalo ... il problema sorge con un div nel div "container" posizionato in maniera relativa del tipo: "position: relative; margin: 0 auto;" .... praticamente i sottomenu che si accendo e spengono mi finiscono sotto al div nel "container".
La cosa non riesco a risolverla neanche con gli "z-index" .

Da annotare che il problema è SOLO su IE.

Se qualcuno può aiutarmi .. :P

[Sgro]

Allora innanzitutto posta il codice html completo di CSS altrimenti è dura aiutarti.

Concettualmente posso dirti che utilizzi gli elementi sbagliati per fare un menu. Un menu è a tutti gli effetti una lista, quindi andrebbe costruito in questo modo:

<ul id="menu">[*]Link 1[*]Link 2[*]Link 3[/list]

Poi tramite fogli di stile gestisci l'aspetto da dare ai vari link, i rollover, ecc. Puoi ad esempio dare un id univoco ad ogni link, e poi tramite CSS gli imposti display a block, altezza, larghezza, immagine di fondo, e così via. Evita di annidare uno dentro l'altro troppi div, ti complichi soltanto la vita per niente. Parti sempre da un html semanticamente pulito ed essenziale, e vedrai che troverai la soluzione giusta con l'utilizzo dei CSS

[hutton]

Sì.. hai ragione.. senza codice è un pò complicato... sto riformattando il codice per inserirlo nel post.

Questo di seguito è il menu html ... i div nelle liste sono i sottomenu.

<div id="navigation">
<ul id="menu">[*]link 1
<div>sotto 1sotto 2</div>
[*]link 2[*]link 3[*]link 4
<div>sotto 1sotto 2</div>
[/list]
</div>

mentre questo è il codice css :

div#navigation {
width: 720px;
background-image: url(images-Top/separatoreNavigation.png);
background-position: top right;
background-repeat: no-repeat;
float: right;
height: 20px;
behavior : url(/javascript/iepngfix.htc);
z-index: 20;
}
div#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
div#navigation li {
position: relative;
display: inline;
float: right;
text-align: center;
}
div#navigation ul li a {
display: block;
width: 100px;
text-decoration: none;
cursor: pointer;
color: #333333;
}
div#navigationul ul li a:visited {
color: #333333;
display: block;
text-decoration: none;
}
div#navigationul ul li a:hover {
color: #333333;
text-decoration: underline;
}
/* sottomenu */
div#navigation ul li div {
right: 20px;
position: absolute;
top: 1em;
margin: 0;
padding: 0;
width: 190px;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
visibility: hidden;
z-index: 20;
}
div#navigation ul li div a{
float: right;
clear: right;
padding: 0;
margin: 0;
}
div#navigation ul li div a {
width: 190px;
line-height: 20px;
background-color: #F5F5F5;
border-bottom: 1px solid #CCCCCC;
font-size: 12px;
z-index: 30;
}
div#navigation ul li div a:visited {
color: #333333;
text-decoration: none;
}
div#navigation ul li div a:hover {
background-color: #D0D0D0;
text-decoration: underline;
color: #333333;
}

[hutton]

Ops .. nel codice del menù ho dimenticato la chiusura del primo div... cmq il problema è che i div all' interno delle liste.. mi stanno sotto ad un ipotetico contenitore posizionato in maniera relativa per centrarlo sotto al div "navigation".

Ma lo dà solo su IE il problema

[webdemo]

sposto su CSS

ciak

[Sgro]

Per creare sei "sottomenu" usa delle altre liste, tipo così:

<ul id="menu">[*]Voce menu 1
    <ul id="sottomenu1">[*]Voce sottomenu 1[*]Voce sottomenu 1[*]Voce sottomenu 1[/list]
  [*]Voce menu 2
    <ul id="sottomenu2">[*]Voce sottomenu 2[*]Voce sottomenu 2[*]Voce sottomenu 2[/list]
  [/list]

[hutton]

ok...
xò .... perchè su ie i sottomenù mi stanno al di sotto di un div estraneo al menu ?