menu drop down orizzontale con i css

davidino86

menu drop down orizzontale con i css

Buona sera a tutti volevo avere una informazione dai voi grandi esperti.
posso aggiungere un menu drop down in orizzontale anche solo ad una voce del menu principale?
la domanda mi viene spontanea perche ho creato la navigazione solo con un immagine che in se ha presente lo stato attivo e lo stato :hover. spero che bastino queste poche informazione.

#navi {
width: 100%;
height: 107px;
background-image: url(img/navi.jpg);
background-position: top;
background-repeat: no-repeat;
top: -16px;
position: relative;

}

ul#pulsanti li {
display:block;
float:right;
margin: 0px;
top: 16px;
position: relative;
}

ul#pulsanti li a {
display:block;
outline:none;
width:100px;height:90px;
background:transparent url(img/pulsanti.jpg) no-repeat 0 0;
text-indent:-9009px;
}

ul#pulsanti li a:hover {
background-position:0 -90px;
}

ul#pulsanti li#contatti-nav a {
width: 100px;
background-position:0 0;
}
ul#pulsanti li#contatti-nav a:hover,
ul#pulsanti li#contatti-nav .selected{
background-position:0 -90px;}

ul#pulsanti li#bio-nav a {
width: 100px;
background-position: -100px 0;
}
ul#pulsanti li#bio-nav a:hover,
ul#pulsanti li#bio-nav .selected {
background-position: -100px -90px;}

ul#pulsanti li#portfolio-nav a {
width: 100px;
background-position: -200px 0;
}
ul#pulsanti li#portfolio-nav a:hover,
ul#pulsanti li#portfolio-nav .selected
{
background-position: -200px -90px;}

ul#pulsanti li#home-nav a {
width: 100px;
background-position: -300px 0;
}
ul#pulsanti li#home-nav a:hover,
ul#pulsanti li#home-nav .selected{
background-position: -300px -90px;}

laburno

La tecnica basilare (ne esistono altre più raffinate) è quella di inserire un ulteriore lista all'interno della voce del menu del quale vuoi creare il drop down.

Poi con i CSS regoli la visibilità di questa sottolista solo al passaggio del mouse sulla voce del menu (applicando display:none di default, e disapplicandolo quando :hover)

davidino86

ok proviamoci. anche se sono un po perplesso da come ho impostato le classi del menu nel css.

grazie.

davidino86

purtroppo non riesco a ottenere nessun risultato. credo che il problema sia il replace delle immagini o io che sono una schiappa. non so bene proprio come approcciare con la seconda lista che va inserita nel menu principale.
spero in un grosso aiuto dato che domani lo vorrei mettere online. speriamo bene.

grazie laburno.

credo che tu sia lo stesso laburno del template gratuito a tre colonne. se è cosi ottimo lavoro.

laburno

Ciao davidino86,
bentornato.
Si, il tema è mio, grazie

Vediamo, sei andato avanti ad occhio oppure hai seguito un tutorial?
Prova a dare un occhiata a questo passo-passo (purtroppo è inglese):
http://sperling.com/examples/menuh/

davidino86

ho cercato di seguirlo, il tutorial del tuo link e altri cercando con google, ma non riesco a interpretare i tutorial per poi personalizzarli nel mio css. :bho:

mi sto rendendo conto delle mie grosse lacune, spero che tu mi possa dare un aiuto concreto analizzando il mio codice con la tua esperinza. grazie

laburno

Ciao davidino86,
forse allora avresti bisogno di leggerti prima qualche breve guida di base prima di cimentarti in realizzazioni un po più complesse come i menu dropdown.

Su HTML.it c'è una tra le più complete, e nelle nostre faq ne abbiamo raccolte altre.

Il menu che ti ho linkato, funziona come tutti i dropdown, ovviamente però per modificarlo occorre avere una conoscenza dei CSS.

lelebart

mi sa che mi prendete per spammer..
da secoli che non mi faccio vivo e poi eccomi con due post di fila che rimandano allo stesso sito! ebbene si, sempre su cssplay è dedicata una sezione ai menu. buona visione:
www.cssplay.co.uk/menus/