Menu a tendina CSS/Javascript

[stepo1982]

Ciao. Sto facendo un menu a tendina verticale con CSS e Javascript.
Questo è il codice della parte XHTML:

----------------------------------------------------------
<ul id="nav">
[*]Home
[*]<a>Intesa &amp; CP</a>
<ul>
[*]Chi siamo
[*]Best Clients
[*]Staff
[/list]

[*]Servizi
[*]Contatti
[*]Link[/list]
----------------------------------------------------------

Ecco invece il codice CSS:

-------------------------------------------------------

#nav {
height: 17px;
margin: 0px;
padding: 2px 0px 6px 220px;
background-image: url(img/menutopbg.jpg);
background-repeat: repeat-x;
background-position: left;
border-top: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
list-style:none;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li { /*all list item*/
float:left;
position:relative;
}
li > ul { /* IE6 fix */
top: auto;
left: auto;
}
li ul{ /*2nd level list */
padding: 2px 16px;
display:none;
position:absolute;
background-color:#FDC07D;
top: 18px;
left: 6px;
list-style:none;
padding: 0;
border: 2px solid #F90;
z-index:1000;
}

li li a {
display: block;
margin: 0px;
padding: 2px 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #000000;
white-space:nowrap;
border-bottom: 1px solid #F90;
}
li:hover ul, li.over ul { /* shows 2nd level list */
display: block;
}
li a {
float:left;
margin: 0px;
padding: 2px 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #000000;
display:block;
list-style:none;

}
li a:hover,
li a:focus,
li a:active {
color: #FFFFFF;
}

--------------------------------------------------------

Il problema è che IE mi visualizza i link del sottomenu come elementi in linea, quindi il sottomenu appare in orizzontale. Firefox lo visualizza correttamente con i link visualizzati come block uno sotto l'altro.
Per maggiore chiarezza allego le immagini in firefox e IE

[salasir]

Potrebbe essere (non l'ho provato) quella definizione li > ul che identfica UL figlio di LI.
IE non riconosce i caratteri figlio(>) e fratello(+). :rollo:

[pierofix]

So che la seguente tecnica ha raggiunto un livello di conformità e uniformità quasi totale:

- http://htmldog.com/articles/suckerfish/dropdowns/

Spero possa essere utile.

[stepo1982]

Ho provato a togliere UL>LI ma non cambia niente. Provo con il tutorial che mi avete indicato anche se è molto simile a quello che già avevo visto

[stepo1982]

Grazie, ora sembra funzionare sia con IE che con Firefox, ho giusto qualche problema col padding che spero di risolvere presto.

[Pandolfo]

dove posso trovare una guida per i css che mi insegni a fare dei menu?

[stepo1982]

- http://htmldog.com/articles/suckerfish/dropdowns/

[Pandolfo]

in italiano???

sono una zappetta in inglese

[stepo1982]

prova qui

http://www.constile.org/template/menu_verticali/

cmq prova anche a cercare su google, magari ne trovi altri

[Pandolfo]

in questo modo mi evidanzia di blu (per il collegamento) anche l'immagine. Come faccio ad impostarlo in modo che tolga la cornice blu all' immagine?

[*]<a href="#">[img]img-struttura/punti-menu.gif[/img]la 
          storia </a>

ho provato così nel css ma non va...

text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
img-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */