Come creare un menu css dropdown orizzontale di base
In questo tutorial, vediamo come creare un menu css dropdown orizzontale di base usando liste non ordinate e liste innestate.
Userò la proprietà css visibility per nascondere i sub item del menu e renderli visibile sullo stato :hover.
Il menu css funziona per i maggiori browser di recente edizione.
Alla fine dell’ articolo, spiegherò come farlo funzionare anche per Internet Explorer 6.
Inizio con la marcatura html di base che consista in una lista non ordinata contenendo lei stessa un’ altra lista per i sub elementi:
<div id="menu">
<ul>
<li><a href="#nogo">Link 1</a>
<ul>
<li><a href="#nogo">Link 1-1</a></li>
<li><a href="#nogo">Link 1-2</a></li>
<li><a href="#nogo">Link 1-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 2</a>
<ul>
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 3</a>
<ul>
<li><a href="#nogo">Link 3-1</a></li>
<li><a href="#nogo">Link 3-2</a></li>
<li><a href="#nogo">Link 3-3</a></li>
</ul>
</li>
</ul>
</div>
Nel seguente preview, possiamo vedere il nostro menu prima di applicare uno stile css :
Siccome i browsers hanno diversi modi di interpretare il margine (margin) e spazio ‘cuscinetto’ (padding), azzerò il tutto per il menu (#menu), ul (lista non ordinata) e li (item della lista).
Applico il float:left; per creare un menu orizzontale di base e la posizione relativa che ci permetterà di seguito di porre i sub elementi in modo assoluto. Tolgo anche la marcatura della lista con list-style:none;:
#menu{
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
Il risultato fine adesso:
Posso adesso dare un pò di stile ai links:
- larghezza width:100px;
- altezza height:30px;
- dichiaro come blocco display:block;
- tolgo la sotto lineatura dei links text-decoration:none;
- allineo il testo sia orizzontalmente text-align: center; che verticalmente line-height:30px;
- colore di sfondo nero background-color:black; e un colore di testo bianco color:white;
#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
Per avere un minimo d’effetto visivo, cambio il colore di sfondo (da nero a rosso) allo stato :hover del link contenuti negli items della lista (li):
#menu li a:hover{
background-color: red;
}
Dettaglio del risultato:
Adesso, posiziono i sub elementi:
Uso la proprietà css position:absolute; per rimuovere i ‘sub’ ul del flusso della pagina, li sposto di 30px partendo dalla parte superiore in maniera che si ritrovano sotto
il primo elemento con top:30px; (30px essendo l’altezza impostata per prima)
#menu ul ul{
position: absolute;
top: 30px;
Il risultato:
Uso la proprietà css visibility:hidden; (visibilita nascosta) per nasconderli:
visibility: hidden;
}
Finalemente, finisco il nostro menu css dropdown, facendo il modo che on :hover, i ‘sub’ ul sono visibile, cambiando semplicemente la sua proprietà visibility a visible (visibile) invece di hidden (nascosto):
#menu ul li:hover ul{
visibility:visible;
}
Il risultato finale dal vivo (passa sopra con il mouse):
Dopo avere provato questo menu css dropdown orizzontale di base con i maggiori browsers, funziona benissimo per IE7, Firefox, Opera e Safari.
Il problema trovato è con IE6.
Con Internet Explorer 6, non funziona proprio e lo stato :hover è ignorato.
Anche se personalmente, lo lascerei a perdere completamente, ancora tanti utenti lo usano per quello ho cercato una soluzione facile da implementare senza dovere modificare tutta la marcatura html e css.
Ho trovato una soluzione nel libro Eric Meyer on CSS che usa un file .htc creato da Peter Nederloff.
L’articolo è in inglese. In breve, IE6 non supporta il :hover su altri elementi che il tag <a>, il quale rende questo menu dropdown completamente inutile.
Pero IE supporta i cosi chiamati ‘behaviors’ (ignorati da FF e altri browsers ‘moderni’ ma per quelli il menu funziona com’ è).
Questo ‘behaviors’ permette di caricare un file tipo .htc che cambia il comportamento degli elementi a quali sono impostati lo stato :hover con l’uso d’ eventi onmouse.
Non sono programmatrice, per quello non mi sono messa a studiare il script incluso in questo file .htc che può essere scaricato gratuitamente dal sito di Peter Nederloff.
Ho usato la versione 2 del file .htc per il mio esempio (csshover2.htc).
Ritornando all’esempio, il file .htc che ci permetterà di fare funzionare questo menu anche per IE6 viene inserito nel foglio di stile all’ elemento body, in questa maniera;
body{
behavior: url(csshover2.htc);
}
Altro questo file, per un buon posizionamento verticale delle sotto voce, serve anche specificare una larghezza fissa agli elementi ‘ul ul’.
Le regole css diventeranno per questo esempio:
#menu ul ul{
position: absolute;
top: 30px;
visibility:hidden;
width:100px; /*larghezza pare alla larghezza degli elementi a*/
}
PS: per utenti di IE6, questo file .htc non è applicato a l’esempio di sopra
About The Author
LordDragon
bello come menu! però mi potresti dire come faccio a centrarlo orizzontalmente nella pagina?
Onsitus
Ciao, dai una larghezza fissa al menu e imposta margin:auto; invece di margin:0;
Esempio:
#menu{
margin: auto;
padding:0;
width: 610px;
}
Paolo
Carino e ben spiegato, però non sono riuscito ad adattarlo alla mia esigenza: 3 livelli.
voce1 voce2
s_voce1
s_voce2 -> s_s_voce1
E’ fattibile? avete un’idea o visto qualcosa da studiarci sopra?
Grazie.Paolo.
Onsitus
Ciao Paolo,
da provare:
<li><a href=”#nogo”>Link 1-1</a>
<ul><li><a href=”#”>Link1-1-1</a></li></ul>
</li>
Per il css:
nascondi la sub lista sul hover del item principale:
#esempio ul li:hover ul ul{
position: absolute;
top:0;
left:100px;
width: 100px;
visibility:hidden;
}
Rende il ul visibile sul stato hover del li:
#esempio ul ul li:hover ul{
visibility:visible;
}
vanni
La scheda esplicativa è in assoluto la migliore sino ad ora consultata.
Non essendo esperto, ho un problema col file csshover2 (utilizzo Explorer6). L’ho scaricato sul desktop, ma il menù mi dà  : Errore nello scrippt di Internet Explorer -Access is denied to: file: ///C:/Documents and Settings/Administrator/Desktop/csshover2.htc.
Ti ringrazio se puoi darmi una mano per fare funzionare il menù
Onsitus
Ciao Vanni (ma sei il Vanni che conosco???)
ho provato io stesso il menu con IE6 in locale è non mi da nessun tipo di errore. Il tutto sta dentro una cartella, non sul desktop (non so se cambia qualche cosa).
Dal ‘access is denied’ sembra un problema di sicurezza. Puoi provarlo online?
Andrea
Ciao, sto usando questo menu che trovo veramente fantastico. Io uso Firefox e provandolo con IE 6.0 mi sono accorto che non funziona. Dipendesse da me, data la considerazione che ho del browser MS, non mi importerebbe, ma come puoi immaginare, la maggior parte dell’utenza usa IE. Non mi è chiaro, nemmeno dal sito di Peter Nederloff, come modificare lo script per poter usare questo menu. Non esiste una descrizione più semplice e megli interpretabile e applicabile? Mi dispiacerebbe davvero dover abbandonare questo progetto. Grazie milla per il prezioso supporto
Onsitus
Buonasera Andrea,
altro scaricare il file .htc e aggiungere il
body{
behavior: url(csshover2.htc);
}
nel css c’è poco altro da fare.
Nota bene pero che non funzionerà  se aggiunge il css direttamente nei tag style della pagina , deve essere messo dentro un css esterno.
Vedi se l’esempio online di questo tutorial ti funziona per IE6 (in fine pagina si trova):
http://www.onsitus.it/css-tutorials/css-dropdown-orizzontale/
Pietro
Salve,
mi potete spiegare perchè al passaggio del muose cambia solo il colore, non apre i sotto-menu?
Onsitus
Ciao Pietro,
usi Internet Explorer 6.0 per caso?
Pietro
no il 7 con windows vista,
grazie per la tua immediata risposta
Onsitus
Mmmhh… ho windows xp. :/
Prova l’esempio online che include il file csshover2.htc (in fine pagina)?
http://www.onsitus.it/css-tutorials/css-dropdown-orizzontale/
Pietro
Purtroppo non sono molto pratico,
mi pare di aver capito di allegarlo nel corpo (es: come un .css nella testa)
ho detto una fesseria?
Pietro
ho installato firefox e ci funziona,
pero il vostro esempio con IE va bene… e quello che ho fatto io no, ho anche copiato ed incollato i due file nominandoli .html .css della paggina che mi hai linkato e gli ho anche aggiunto
ma niente… non va
Onsitus
Allora, se scarichi questo esempio (basato su questo tutorial):
http://css.flepstudio.org/css-menu/menu-dropdown-colorato-3.html
troverai nel zip il file .htc usato. Ti mancherà  quello.
L’html lo puoi copiare guardando il sorgente della pagina di prova sul mio server (il link postato prima) e il css si trova su
http://www.onsitus.it/css-tutorials/css-dropdown-orizzontale/stile.css
(salvare con nome stile.css).
Pietro
riassumendo dovrei avere 3 file
.html
.css
.htc
e per giunta mi basta solo copiare ed incollare…..(inboccato col cucchiaino) LOL
ma non funge
Onsitus
Se vuoi ti mando la pagina d’esempio via email (quella con qui hai scritto qui, se è quella giusta)!
Pietro
Grazie sei gentilissima,
si la mail è giusta,
ancora ci sto scapocciando con quel .htc non ci riesco proprio….
ho modificato quella multicolore che hai linkato ma vorrei capire…
premetto che è solo un mio capriccio, l’unico mio scopo è quello di imparare
Leo
Ciao a tutti…..mannaggia….ho seguito le istruzioni e caricato i files giusti ma mi funziona (e bene !!) solo su Firefox…su IE7 non funziona la parte drop-down ..il resto si.
Gli stati hover di Link1 Link2 e Link3 funzionano sia su FF che su IE7 ma IE7 non mi fa vedere i sub-menu tipo Link 1-1 ..Link 1-2 etc etc
Ci stò diventando matto….ho controllato in linea questa pagina di esempio con la mia..il css…..tutto insomma….non capisco xchè con IE7 la tua pagina di esempio funziona e nella mia no ! :-\
Un aiutino ?
Grazie 1000
Onsitus
Ciao Leo,
senza vedere la tua pagina difficile capire dove è l’errore.
Come per Pietro se vuoi ti mando i file della pagina d’esempio via email (quella che hai inserita per scrivere qui, se è quella giusta)
Leo
Ciao gentilissima….si si la mail è quella giusta. Proviamo così…..grazie
Onsitus
Fatto…se proprio non ti va, posta un esempio online del tuo menu.
Carlitos
Ciao, premetto che ho appena cominciato ad avvicinarmi a questo linguaggio quindi sono a zero… uso Dreamweaver e ho iniziato con la marcatura html di base (descritta all’inizio) e riesco a vedere il menù come nell’esempio ma appena metto gli altri codici non vengono più riconosciuti e mi fa vedere il menù identico con sotto l’elenco dei codici così come li ho scritti. Cosa sbaglio?
Grazie.
Onsitus
Buongiorno Carlitos,
per ‘mettere altri codici’, vuoi dire la parte css?
In quel caso dove l’aggiunge?
Carlitos
Grazie per la risposta, si, parlo dei codici CSS…. come devo comportarmi con Dreamweaver?
I codici css dove devo inserirli?
Grazie.
Onsitus
Ciao,
purtroppo scrivo tutti i codici a mano e non faccio uso di Dreamweaver.
Comunque, i css possono essere aggiunti di differenti manieri, direttamente nel file html o come foglio .css esterno.
Qui troverai, le spiegazione di base poi se hai bisogno di chiarimenti, chiedi pure!
http://www.flepstudio.org/forum/css-html/1975-guida-css-di-base.html#post10750
Carlitos
In una qualche maniera sono riuscito… ho creato il file .html con Dreamweaver e il .css con CSSEdit quindi ho applicato il .css all’html e a volte funziona (devo ancora capire perchè a volte funziona e se faccio delle modifiche non cambia…comunque) ora la domanda è questa:
in questo sistema descritto sopra è possibile usare dei pulsanti creati da me e non quelli neri/rossi ottenuti con i codici?
devo mettere nel .css un codice con un url che vada a cercare il pulsante disegnato?
puoi scrivermi quello che devo fare?
grazie mille per l’aiuto
Onsitus
Qui, c’è un esempio creato basato su questo tutorial che fa uso d’immagine (tanto per darti un idea):
http://css.flepstudio.org/css-menu/menu-dropdown-colorato-3.html
Nel tuo caso se hai un unica immagine come sfondo, dovrai usare il background con no-repeat.
Esempio: background:url(mioPulsante.jpg) no-repeat top left;
Proprietà  css background:
http://css.flepstudio.org/css-proprieta/css-background.html
Ale
Ciao a tutti,
sto usando lo script con l’application server Zope in cui mi trovo il codice spezzettato in vari file.
Sono riuscito comunque a ricostruire il tutto e infatti il menù a tendina in Firefox e Seamonkey funziona perfettamente… non funziona in Ie7… nel senso che cambiano colore i nomi in alto ma non scende la tendina.
La cosa strana è che se eseguo in locale lo script, così come l’ho scaricato, tutto funziona correttamente, anche da Ie7…
Avete qualche idea?
Ale
Onsitus
Doctype mancante o sbagliato?
Se no, un link alla pagina in questione rende sempre piu facile capire dove puo essere il problema!
Ale
In effetti il Doctype non c’è… questo è un lavoro fatto da un’altra persone che ho “ereditato” senza troppe spiegazioni e sto cercando di interpretare cosa era stato fatto…
Il link è questo:
http://www.tubosider.it/TUBOSIDER/prod/it/pub/code/home_test
Ale
Ho copiato il Doctype che c’era nel file di esempio ed in effetti i link in alto si colorano correttamente… non scende ancora la tendina ma potrebbe essere un problema di livelli… spero…
Onsitus
Ciao, si, su IE sembra che il menu si apre dietro l’immagine del header. Prova a cambiare il z-index!
Ale
E’ proprio quello il problema… lo z-index è a posto perchè è l’unico elemento che deve “passare sopra” ad altro.
Avevo già  avuto quel problema con firefox è l’ho proprio risolto con z-index=1 che prima non era specificato.
Ora ho provato ad aumentarlo e mettere z-index=0 all’immagine che si vede sotto ma non cambia nulla…
…potrebbe essere un problema di javascript???
Onsitus
Personalmente non vedo nessun z-index impostato per il menu
#menu_oriz_p {left:0;position:absolute;top:85px;width:100%;}
Riguardo un problema con javascript, mi sembrerebbe strano ma l’unico modo di avere sicurezza per queste cose e disabilitare un script alla volta e vedere il risultato.
oakabilly
@onsitus: il tuo sito non va: è un problema temporaneo??
O.T. (dove posso trovare il file flash che era presente all’indirizzo http://wwww.onsitus.it/flashdownload/1.flash-preloader.html??) Grazie 1000!
Onsitus
Buonasera,
Server che è andato offline. Ci stanno lavorando spero che sia una cosa veloce
Se sei registrato sul forum di FlepStudio, lo puoi trovare in questo thread:
http://www.flepstudio.org/forum/flash-italiano/2687-2-caricamento-as2.html#post13980
Ale
Ciao,
ho ancora un problema sotto Ie. Com’è possibile che la tendina sparisca quando provo a scendere con il mouse su una delle voci della tendina stessa, partendo dal menu in altro? In Firefox la tendina rimane sempre fissa…
L’indirizzo è sempre http://www.tubosider.it/TUBOSIDER/prod/it/pub/code/home_test
Grazie!
gio
Ciao
Ho un problema con IE7, non mi si vede la tendina, cosa posso fare su firefox, safari e opera si vede tutto perfettamente cosa posso fare ?
questo è il link
http://www.crazydesigner.it/noad/home.html
Onsitus
xAle: ilproblema sembra essere il slideshow in javasript che crea un spazietto di pochi pixel al di sotto del menu. Stranamente se aggiungi un background-color a #tendina li a sembra risolvere il problema per ie. Non so se è una soluzione giusta nel tuo caso.
xGio:cambia il doctype della tua pagina per uno xhtml strict o transitional
Ale
Gli ho aggiunto il colore di background. L’effetto grafico non è male ma il problema persiste. In realtà  ho provato ad aprire con Ie il file originale e gli esempi sul sito e tutto funziona correttamente… magari ho modificato qualcosa che non andata toccato?!?
GIO
Perfetto funziona Grazie mille
Ale
Ho risolto in problema in questo modo:
http://www.tubosider.com/TUBOSIDER/prod/it/pub/code/home_test
però mi piaceva l’effetto trasparenza sotto alle voci della tendina che in Ie si perdevano.
Esiste un modo per averle lo stesso, facendo funzionare lo script anche sotto Ie?
Onsitus
Ciao Ale,
boh…non capirò mai Internet Explorer per certe cose :/
Vero che cosi, toglie un po del effetto iniziale. Provato un gif trasparente?
O un png trasparente ma poi dovrai anche aggiungere un javascript visto che IE6 non li supporta!
Vedo le immagini (quelle che girano) un po sbiadite, impressione mia o è fatto di proposito?
Onsitus
Un altro consiglio, invece di usare un immagine di sfondo per i tuoi pulsanti di 160×60, basta una di qualche pixel tipo 2×60 con il repeat-x. Riduce il tempo di caricamento.
Ale
OK con l’immagine .gif trasparente… ci avevo pensato ma credevo che non fosse fattibile… invece è ok, anche con Ie 6.
L’effetto sbiadimento sulle foto è voluto, proprio per far vedere meglio il menu trasparente che passa sopra.
danielix
ciao è possibile avere uno sfondo trasparente in cui si intravedano le immagini sottostanti? In pratica all’apertura del dropdown vorrei non ci fosse un colore pieno sotto i link ma tipo un livello alpha che faccia intravedere l’immagine di sfondo.
Onsitus
Ciao Daniele,
perche no? E quello che ha fatto Ale che ha postato sopra di te.
Togli il background-color (applica un gif trasparente come sfondo in caso di problemi con IE, come nel caso di Ale).
luca_85
Ciao..scusa ti volevo chiedere se puoi dirmi i valori iniziali del file CSS ( come quando lo si installa per la prima volta sul pc), per creare il menu verticale..Perchè ho fatto un paio di modifiche però sul menu direttamente e adesso non mi ricordo più le impostazioni originare..Prima di tale modifiche il menu funzionava correttamente.. grazie in anticipo
Onsitus
Ciao Luca, il tutto è scritto sopra nel articolo. :/
barbara
ciao,
ho seguito tutte le istruzioni ma il menu non mi viene orizzontale
e mi compare soltanto il primo link con il sotto menu
grazie ciao
Onsitus
Ciao Barbara,
hai una pagina di prova online per capire dove è il problema?
barbara
no non ho una pagina on line ma posso farti una foto dello schermo per farti capire cosa mi vine fuori
questo è il codice css che ho applicato
#menu { margin: 0; padding: 0 }
#menu ul { margin: 0; padding: 0 }
#menu li { list-style: none; display: left; margin: 0; padding: 0; position: relative }
#menu li a { color: white; line-height: 30px; text-decoration: none; background-color: black; text-align: center; display: block; width: 100px; height: 30px }
#menu ul ul { visibility: hidden; position: absolute; top: 30px }
#menu li a:hover { background-color: red }
#menu ul li:hover ul { visibility: visible }
il risultato è questo
/Users/MACCONE/Desktop/link.tiff
barbara
no scusami,
non posso mettere l’immagine
comunque nella mia pagina si vede solo per esempio:
Link1
con lo stile giusto quando si passa su col mouse la tendina funziona però come sotto menu compaiono i 3 link 1-1 1-2 1-3 più il Link 2
mentre gli altri 2 link sono proprio nascosti
Onsitus
Sicura che la struttura html sia corretta e che i tag siano chiusi per bene. Da come scritto sembra il link 2 sia incluso dentro il link 1 e di conseguenza gli altri 2 vengono considerati come sub elementi.
barbara
in effetti ho ricontrollato tutto e c’era proprio questo problema
ora viene giusto
grazie mille ciao!!
barbara
ciao avrei un’altra domanda:
come faccio a cambiare il colore di sfondo solamente nel sottomenu?
ancora grazie barbara
Onsitus
Applica lo stile a #menu li li a
barbara
grazie per la disponibilità Â
adesso però vorrei cambiare l’hover solamente nel menu principale come faccio?
Onsitus
Il piu facile sarebbe di dare un nome di classe ai primi link tipo
link 1 e per selezionarli: #menu li a:hover.MioLink
Onsitus
Scusa il sito ha tradotto i tag, sarebbe
<a href=”#nogo” class=”MioLink”>link 1</a>
barbara
ciao grazie per il tuo prezioso aiuto
volevo sapere se è possibile creare un form dentro un menu a tendina
cioè anziche come sottomenu far comparire i link far comparire un form
Grazie ciao
Onsitus
Mmhhh…cosi detto puoi metterci quello che ti pare.
Al livello usabilita, credo che sara un problema. Per il poco che l’utente sposta il mouse il form sparira e se stava a scrivere dentro un campo di input direi che il puntatore rimanera la nel vuoto in un campo di input invisibile a l’occhio.
Al livello validità  , un elemento form dentro un li, non mi sembra molto corretto.
Comunque, provaci e se ottiene un buon risultato, fai sapere. Potrebbe essere interessante. Magari una buona idea per un futuro tutorial o utilità  .
barbara
ciao è possibile invece far comparire come tendina un’immagine con i link diciamo “messi sopra” ?
Onsitus
Buongiorno Barbara, potrebbe impostare l’immagine come immagine di sfondo a l’elemento desiderato.
barbara
a menu ul?
Alessio
Ciao a tutti, il mio problema è sempre inerente a IE6 ed è il seguente:
passando con il mouse sui link, mi si apre sì la tendina, ma in orizzontale…cioè i link del secondo livello mi si aprono uno di fianco a l’altro invece che verticalmente…un aiutino?
Onsitus
xBarbaba: per i sub link o a #menu ul ul (per uno sfondo generale a tutti i link) o a #menu ul ul li (per uno sfondo a ogni voce)
xAlessio: solo con IE6 ti fa quel problema? Doctype sbagliato?
Se hai una prova online posta pure il link. Sempre più facile per capire!
Ale
scusate ma sono un principiante (ignorante XD) mi potreste consigliare una guida per uno come me … ho photoshop cs4 preso da phtotoshop extended ho anche dreamweawer o come si chiama ma nn so usarli …e difficile immagino ma nn avreste delle guide facili e veloci per imparare??
vi ringrazio ..se non rispondo contattatemi sull’email : ale54@live.it
Onsitus
Ciao Ale, uso pochissimo Photoshop e mai Dreamweaver. Comunque incluso nei software della Adobe c’è una guida che è sempre un buon punto di partenza poi di la se vuoi approfondire un argomento specifico, troverai in rete tantissimi tutorial. Basta un po di pazienza in fare piu prove e impegno per imparare al meglio! Se leggi l’inglese (non so se sono tradotti in italiano), vedi la collezione For Dummies (dummies.com)…quelli libri sono sempre abbastanza semplice e completi per niziare.
francesco
thanks, funziona perfettamente
clud
ciao, ho visto questo tutorial, ho provato più volte a farlo funzionare su ie ma non c’è stato verso ma ho provato ad inserire il doctype e ha funzionato correttamente, ecco cosa mancava
barbara
ciao,
come faccio se un tag è andato sotto un altro?
Letteralmente sotto
mi spiego: ho fatto un menu, con i suoi link e gli hover,
quando apro la pagina con firefox se srtingo la finestra l’hover non funziona
più allargo la finestra del browser, e di conseguenza il testo a fianco sale, più gli hover dei link prendono a funzionare
guardando il layout con dremweawer ho visto che il tag dove è contenuto il testo va sopra quello del menu
e allargando la finestra il tag che contiene il menu man mano va a scoprirsi
non so se è chiaro ma come posso fare?
Grazie ciao
barbara
P.s. con safari l’hover non funziona per niente
come faccio a farlo funzionare?
maurizio
Tutorial molto bello e spiagato molto bene, solo che su Windows Vista e IE 7 non funziona, nel senso che i SubMenù non vengono mai visualizzati.
In linea con XP e IE6 e il file aggiuntivo csshover2.htc tutto ok.
Qualcuno per caso ha provato e magari risolto questo problema?
Grazie.
Onsitus
xBarbara: hai il tuo esempio online? Non vedo quel problema con Firefox e con safari, mi funziona sia con la versione3 che la 4.
xMaurizio: personalmente lavoro su windows xp. Ho provato adesso il menu, su una altro pc con Vista ma Internet Explorer8, e anche li funziona. Mi sembra strano che non va solo per IE7. Comunque con l’altro utente che aveva incontrato stesso problema del tuo tra Vista e IE7, non ho mai capito quale era il suo errore ma l’esempio online che li avevo postato li andava bene. Vedi se è il caso anche per te: http://www.onsitus.it/css-tutorials/css-dropdown-orizzontale/
Devro trovarmi un Windows Vista con IE7! :/
eka
ciao,
il tutorial è molto bello e grazie alle spiegazioni è anche molto semplice da capire… c’è solo una cosa che nn riesco a fare… =(
vorrei che quando col mouse vado su una delle sottovoci la voce principale resti in stato di hover… come posso fare?
grazie
Valentina
Ciao! Bel tutorial!
Il mio problema è che se all’interno della pagina metto un elenco puntato, allora il menu gli va sotto invece che sopra. Secondo te come mai?
Grazie!
Onsitus
xEka, sarebbe da modificare la sua struttura per problemi di compatibilità  e cambiare i a:hover con :hover >a
Le stessa richiesta è stata fatta per un altro esempio di menu dropdown per quale ho postato una nuova versione. L’idea di base sarebbe la stessa se ti va di studiartelo un po: http://css.flepstudio.org/css-menu/orizzontale-dropdown-3-livelli-15-2.html
xValentina, non ne ho idea. L’ho provato sul file d’esempio in locale e non ho riscontrato quel problema. Se hai il tuo esempio online, posta il link.
Alessio
salve,
scusate, ho provato ad inserire il codice per questo sito http://www.fornacelle.it, io lo vedo alla grande, ma il cliente ha ricevuto delle telefonate in cui dicono che non vedono il dropdown
Perchè? credevo di aver fatto tutto bene….. HELP, please!
Alessio
ciao,
puoi vedere il codice su http://www.fornacelle.it…. non capisco dove sia l’errore. Per favore help! Grazie mille.
Onsitus
Buongiorno Alessio,
su IE6, il menu della tua pagina non funziona.
Controlla il css alla riga 188:
behavior: url(script/csshover2.htc);hack per ie6
Quel ‘hack per ie6′ non è commentato corretamente. Potrebbe essere quello a causare l’errore di lettura.
Se no, sarebbe da chiedere a chi incontra l’errore quale browser usano, la versione del browser e il sistema operativo. Solo cosi si potrebbe fare le prove.
alessio
grazie innanzitutto, ma dunque com devo scrivere?
Onsitus
Ciao Alessio
togli semplicemente la parte ‘hack per ie6′:
behavior: url(script/csshover2.htc);
alessio
lo spazio tra behaviour: e url ci deve essere, vero? grazie mille
raffaello
un ora di buio completo e poi bastava togliere !!!!!!!!!
funziona ok grazie, super menu
cristian
Ciao! Bellissima la guida, finalmente qualcuno che spiega chiaramente come funzionano questi menu… come già  altri hanno notato in ie7 i sottomenu non compaiono. Ho allora aggiunto la seguente stringa all’inizio della pagina, prima di :
(la stessa del file del menu colorato) e in ie7 funziona, compaiono i sottomenu, ma, come puoi vedere nel mio sito, mi sballa tutto lo stile della pagina, non rispetta più i margini, ecc… questo sia in ie7 che in firefox… Hai qualche idea?
grazie mille!
cristian
ah, dimenticavo, la pagina non ha estensione html o htm, ma php, essendo l’intero sito basato su php… può essere quello il problema? come risolverlo?
Valerio
Ciao! perfetto il tuo menù!
ti volevo solo chiedere una cosa. io vorrei che gli elementi 1-1 1-2 1-3 apparissero non inpilati uno sotto l’altro, ma in fila orizzontale. come dovrei fare?!
grazie mille!
Onsitus
xCristian, avrai risolto visto che non vedo nessun problema con il tuo sito!
Onsitus
xValerio, credo che il piu facile sia basarti su questo esempio :http://css.flepstudio.org/css-menu/menu-dropdown-esempio-1.html
Andrea
Ciao, innanzitutto ti ringrazio per il tuo script e’ veramente carino.
E’ pefettamente funzionante su Firefox ma non su IE7.
Ho windows xp.
Su Internet explorer 7 non mi fa’ “cadere” i tabs.Ovviamente su Firefox si.
Ho provato con un programma IE tester,visualizzando la pagine come se avessi installato IE6, i menu a “caduta” me li visualizza in orizzontale invece che verticale. Come posso correggere?
Se vuoi dare un occhiata al sito
http://www.itesa.it/test/index.htm
Grazie innanzitutto per l’attenzione.
Saluti Andrea
onsitus
xAndrea: aggiungi width:100px; a #menu ul ul
Nel tuo caso avrai:
#menu ul ul{
position: absolute;
top: 25px;
visibility: hidden;
width:100px;
}
Onsitus
Sempre x Andrea: ho controllato la tua pagina con ie7 e non ho incontrato errore.
Daniele
Nonostante tutto, qualche problema di compatibilità su Explorer 7 e 8 si presenta ugualmente se, oltre al browser Microsoft non sono stati installati tutti gli aggiornamenti al sistema (uso XP SP2).
Fortunatamente li ho superati comunque, usando la versione aggiornata del file “.htc” (la 3.11 del 15nov2009), che si chiama “csshover3.htc” ed è scaricabile dal sito di Peter Nederloff:
http://www.xs4all.nl/~peterned/csshover.html
Onsitus
Grazie per condividere!
Cocker
Grazie mille per questa spiegazione!
Mi hai semplificato la vita!
E fatta davvero bene e spiegata altrettanto bene!
Grazie
michela
ciao
allora io ho provato a farlo
con firefox funziona
con internet esplorer sette no
ho scaricato anche il file htc ma messo nel body il comportamento ma niente
di niente
mi potete aiutare ? grazie
Visitatore
Ciao, nel secondo box dove specifichi le proprietà  CSS c’è un errore di battitura:
#menu{
padding:0;
maragin:0;
}
MARAGIN anziché MARGIN.
Grazie per il tutorial!
Onsitus
Grazie della segnalazione Visitatore!
paul
ciao Onsitus….la tua guida è chiarissima ed sono riuscito anche a inserire delle immagini da me create come menù……ora quello che mi sfugge è come faccio ad inserire il menù al centro del mio ?????
aiutami!!!!
emilio
grazie 1000!!!! grazie a te posso continuare col sito di cronosfera e finirlo!!!!
Tiziano
Ciao utilissima guida, ottimo lavoro, vedo che i commenti sono datati, ma avrei bisogno di un aiuto perchè la pagina che indico non visualizza il menu a tendina con IE 6 (si lo so che è datato ma il 15% della mia utenza ancora lo usa) ho messo il file htc e ho provato i vari consigli indicati in questa pagina ma senza risultato. Grazie di cuore per il tuo sito e per l’aiuto.
Questa la pagina
http://www.fioridibach.it/sandbox/bach/prova.htm
gino
come faccio a fare un menu orizzontale se nella home ho anche un’ immagine?
Voorei centrare l’ immagine e mettere sotto il menu (orizzontale)
grazie
Claudio
Salve vorrei chiederti una cosa visto che sono alle prime armi con l’html
non ho ben capito come applicare il css cioè ho creato un piccolo forum
su un dominio forumfree e vorrei usare questo menu in cima alla pagina pero’ mi vede soltanto la lista cioè la parte html ma il css no.e non riesco a capire dove sbaglio.
mi potreste dire dove inserire il css?
simone
ciao ti volevo chiedere anche se non centra con l’argomento della pagina come farei a fare una casella dei commenti come la tua in modo che appena uno preme submit il commento viene scritto nella pagina .
Sono sicuro che mi saprai rispondere grazie.
Alessandro
Ciao Onsitus,
Grazie del tutorial,
avrei una domanda
tu scrivi
“per un buon posizionamento verticale delle sotto voce, serve anche specificare una larghezza fissa agli elementi ‘ul ul’.
Le regole css diventeranno per questo esempio:
#menu ul ul{
position: absolute;
top: 30px;
visibility:hidden;
width:100px; /*larghezza pare alla larghezza degli elementi a*/
}
”
la mia domanda é : é possibile via css settare la dimensione del menú a tendina in funzione della massima larrghezza degli elementi in esso contenuti?
Grazie
Ale