[TYPO3-UG Italy] Menu orizzontale da www.tanfa.co.uk. Aiuto!

[rubbrduck]

Ciao a tutti,
è il primo post che mando a questa lista, quindi ne approfitto per
presentarmi.
Mi chiamo Luca, scrivo da Foggia, ho cominciato da poco ad avvicinarmi ai
CMS ed a Typo3 in particolare.
Non ho tantissima esperienza con l'html ma mi sto sforzando di imparare.
Sono rimasto folgorato dagli esempi visti su http://csszengarden.com e dagli
articoli su mezzoblue e alistapart e dalle idee sulla separazione della
forma dal contenuto con i css. Inoltre mi interessa il problema
dell'accessibilità e della compatibilità delle pagine web con i mezzi
automatici, tipo gli screenreaders, per persone disabili.

Ho visto di cosa è capace Typo3 (www.yaml.de) e mi è sembrato molto
superiore alle alternative, come Joomla, Drupal, ecc.
Il problema è che la documentazione è scarsa, scarna e sparsa in giro per
tutta la rete, e soprattutto ho trovato molta roba in tedesco, che mastico
molto poco :-)
La curva di apprendimento è così ripida che mi servirebbero dei compagni di
cordata.

Il problema che sto cercando di risolvere adesso riguarda la
"typo3izzazione" del sito di un tizio che conosco, che ho rifatto per studio
in html puro e css senza JS.
In particolare il menù mi risulta un po ostico. L'idea è l'utilizzo di <ul>
e <li> per la creazione di una lista che con i css verrà resa orizzontale e
con più livelli, come si vede spesso. Il tutorial è quello che si trova su
http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp. La particolarità
per risolvere il bug di IE che non permette di assegnare l'attributo :hover
su tutto, è un file .htc prelevabile da
http://www.xs4all.nl/~peterned/csshover.html che istruisce i browser MS su
come agire nella visualizzazione della pagina, insieme ad un blocco css
condizionale.

La mia domanda è duplice: cosa scrivo in TypoScript per allestire il menu?
Come faccio a tradurre il blocco condizionale? Posso lasciarlo all'interno
del file .css o devo in qualche modo "passarlo" attraverso il TS?

Per dimostrare quanto una intelligenza frettolosa ed indisciplinata sia
capace di incasinare qualsiasi processo di apprendimento posto qui di
seguito un pezzo del TS che riguarda il menu:

# Menu cObject
temp.menu = HMENU
temp.menu {
entryLevel = 0
wrap = <div id="menu"> | </div>
# First level menu-object, textual
1 = TMENU
1 {
noBlur = 1
expAll = 1
wrap = <ul> | </ul>
NO {
wrapItemAndSub = <h2> | </h2>
}
}
# Second level menu-object, textual
2 = TMENU
2 {
noBlur = 1
expAll = 1
wrap = <ul> | </ul>
NO {
wrapItemAndSub = <li> | </li>
}
}
# Third level menu-object, textual
3 = TMENU
3 {
noBlur = 1
expAll = 1
wrap = <ul> | </ul>
NO {
wrapItemAndSub = <ul> <li> | </li> </ul>
}
}
}

So che è sbagliato ma non so dove, comunque è uno dei cento tentativi che ho
fatto per far funzionare l'html della pagina che uso come template. Come si
vede è preso quasi pari pari dal tutorial.

Questo invece è il blocco di codice che devo gestire:

<div id="menu">
<ul>
<li><h2>La Casa di Cura</h2>
<ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</li>
</ul>
<!-- Fine prima voce menù -->
<ul>
<li><h2>Servizi</h2>
<ul>
<li><a href="#">Ambulatori</a>
<ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</li>
<!-- sub uno --> <li><a href="#">Radiologia</a>
<ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</li>
<!-- sub due --> <li><a href="#">#</a></li>
</ul>
</ul>
<!-- Fine seconda voce menù -->
<ul>
<li><h2>Reparti</h2>
<ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</li>
</ul>
</li>
</ul>
<!-- Fine terza voce menù -->
<ul>
<li><h2>Informazioni Utili</h2>
<ul>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</li>
</ul>
<!-- Fine quarta voce menù -->
</li>
</ul>
<ul>
<li><h2>Info</h2>
<ul><li><a href="#">#</a></li>
</ul>
</li>
</ul>
</div>

E questo è il blocco di css per stilarlo:

/*** menu ***/

#menu {
width: 100%;
background: #09d;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px 'Trebuchet MS', 'Lucida Grande',Verdana, Lucida,
Geneva, Helvetica,Arial, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #09d;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #09d;
text-decoration: none;
}
#menu li {
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

div#menu ul ul {
display: none;
}
div#menu ul li:hover ul {
display: block;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {
display: none;
}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {
display: block;
}
/*** menu ***/

Chiedo scusa per la lunghezza del post, se ho infranto una o più delle
regole della lista e in genere se ho fatto qualcosa di sbagliato.

Ciao, Luca.