You Are Here: Home » CSS Menu » CSS menu orizzontale dropdown – esempio 1

CSS menu orizzontale dropdown – esempio 1

Menu css dropdown orizzontale che apre una seconda riga con sub-links

Questo menu a misura fissa è creato usando un lista di tipo non-ordinato e liste innestate per contenere i secondi links del menu giocando con la proprietà css visible per nascondere e fare apparire il sub-menu quando necessario. L’effetto ‘roll over’ dei pulsanti fa l’uso d’un unica immagine posizionata con la proprietà css background-position.

Compatibile con IE7, Firefox, Safari, Opera.

Compatibile con IE6, con l’uso aggiuntivo d’un file .httc (incluso nel zip – non applicato nel seguente esempio).

  css-menu-esempio-1.zip (5.3 KiB, 9,393 hits)

This article in english >>

Sponsors of this article

About The Author

WebMaster

CEO e amministratore Network Flepstudio.org

Number of Entries : 85

Comments (20)

  • Mario

    Complimenti…menu accattivanti e perfetti.
    Grazie mille buon lavoro.

    Reply
  • Onsitus

    Grazie a te Mario :)

    Reply
  • Leonardo

    Grendeeeee. Sto avvicinandomi ai css ed ho trovato in questo sito una miniera di suggerimenti utili e soprattutto del codice css ben commentato. Le mie congratulazioni.
    Leonardo

    Reply
  • Very

    Ho provato ad inserire il collegamento al file htc nella head nel modo seguente:
    body {behavior: url(csshover2.htc);}
    ma in diversi test non viene riconosciuto e la pagina va in errore.. esiste un altro modo per avere compatibilità  con IE6 oppure ho sbagliato io qualcosa? Ho anche provato ad inserire la proprietà  nel CSS esterno ma ancora peggio.. :(

    Reply
  • Very

    specifico meglio.. ovviamente ho inserito il behavior del body all’interno del tag ..

    Reply
  • Onsitus

    Ciao Very,
    hai un link alla tua pagina?
    Sembra che hai fatto tutto correttamente e non saprei dirti cosi dove è l’errore.

    Reply
  • Very

    no la pagina non è ancora pubblicata comunque dovrei aver risolto.. al massimo ti richiedo! GRAZIE MILLE!!

    Reply
  • Very

    rieccomi a litigare con questo menu ed il problema è sempre con IE6.. non vengono visualizzate le voci di sottomenu anche se è collegato il behavior e con una sola voce ho risolto mettendo menu al posto di menu ma nel caso io abbia più voci, come devo fare? Ora è caricato ma vorrei darti il link in via privata..

    Reply
  • Onsitus

    Va sul forum (link nel menu in alto) e mandami un mp!

    Reply
  • carantia

    Come al solito un ringraziamento quando uso qualcosa che imparo da te. Usare questi menu senza javascript rende tutto più semplice e lineare. Complimenti!

    Reply
  • assistenza pc roma

    Sto usando questo menu, è davvero utile, funzionante e leggro, cosi non ho problemi con javascript. grazie mille ;)

    Reply
  • clacla

    ciao,
    mi affaccio ai css per la prima volta. Ho utilizzato questo menù, e sono molto soddisfatto. Ho però un piccolo (non troppo piccolo) problema:
    su alcune voci i sottomenù sono 3, su altre invece arrivano fino a 6. Come posso fare per gestirli? Nel primo caso mi appare la casella nera vuota, nel secondo invece la casella bianca con la voce dentro. Grazie infinite in anticipo per la tua disponibilità e… complimenti!

    Reply
  • Onsitus

    Ciao Clacla, non sono sicura avere capito il tuo problema. Hai l’esempio online?

    Reply
  • D 97

    Come dice il mio professore, il programmatore bravo è colui che “ruba” i codici, mentre il programmatore geniale è colui che li crea …

    Reply
  • Bruno Tominetti

    Buongiorno, ho sperimentato questo menu, molto bello e “leggero”; non c’è la possibilità di avere visibile all’accsesso alla pagina la voce selezionata e relativo sub menu? La mia esperienza con i css è decisamente povera ;-)
    Grazie mille, a presto e buon lavoro
    Bruno

    Reply
  • giacomo

    non sono molto bravo a spiegarmi ma cercherò di farlo xD..
    allora.. prima devi dare una classe alla lista che vuoi che sia subito mostrata e nel css li dai gli stessi stili delle altre però al posto di metterli display: none (credo ci sia questo.. non ho scaricato il file D= ) li metti display: block
    successivamente devi far si che quando metti il mouse sull’interò menù ti passa a display: none
    ed infine devi mettere che quando metti il mouse sopra la lista che viene mostrata fin dall’inizio li viene la proprietà display:block
    so che non ci si capirà nulla :( semmai dimmelo e posto il code completo

    Reply

Leave a Comment

© 2012 Powered By Flepstudio.org

Scroll to top