[RISOLTO] Menù orizzontale a cascata verticale

  • Creatore Discussione Creatore Discussione Kirsolo
  • Data di inizio Data di inizio

Kirsolo

Utente Attivo
17 Gen 2013
171
0
0
Salve vorrei realizzare un menù orizzontale (HOME - CHI SONO - DOVE SIAMO ) e che per ognuno delle voci ci sia un sottomenù che in verticale, per esempio sotto "DOVE SIAMO" le voci ( A CASA - IN AUTOBUS - IN TRENO ). Spero di avermi fatto capire.

Il mio problema è nel realizzare il sottomenù in verticale, me lo visualizza come il menù principale in orizzontale.

Qualcuno mi può postare sia HTML che CSS abbastanza semplice di un esempio?

l'html dovrebbe essere questo:

HTML:
<ul>
<li> HOME </li>
<li> CHI SONO </li>
<li> DOVE SIAMO
   <ul>
     <li>A CASA</li>
     <li>IN AUTOBUS</li>
     <li>IN TRENO</li>
   </ul>
</li>
</ul>

mi servirebbe il css
Grazie
 
ciao prova questo
HTML:
<style>
    ul {
        margin:0;
        padding:0;
        list-style-type: none;
        font-size: .9em;
    }
    ul ul {
        list-style-type: none;
        margin-left:10px;
        font-size: .8em;
    }
</style>
 
ciao prova questo
HTML:
<style>
    ul {
        margin:0;
        padding:0;
        list-style-type: none;
        font-size: .9em;
    }
    ul ul {
        list-style-type: none;
        margin-left:10px;
        font-size: .8em;
    }
</style>
no, forse non hai capito il mio problema, posto un esempio con le foto:

a me il menù compare in questo modo: sotmenoriz.jpg





mentre io lo vorrei esattamente in questo modo:sotmenVert.jpg

per l'html è il seguente
HTML:
  ....      
        <li>CULTURA
	   <ul><li>MANGIARE IN FRIULI</li>
	         <li>ARTE E MUSEI</li>
                 <li>MARE E SPIAGGIA</li>
	   </ul>
	</li>	           
        <li>DOVE SIAMO</li>
....
 
si infatti avevo capito tutto in verticale
prova questo
HTML:
<style>
    ul {
        margin:0;
        padding:0;
        list-style-type: none;
        font-size: .9em;
    }
    ul li {
        float:left;
        padding:8px;
    }
    ul ul {
        font-size: .8em;
        overflow: hidden;
    }
    ul ul li{
        float:  none;
    }

</style>
 
Si esatto è quello che voglio.

Potresti spiegarmi meglio come mettere il sottomenù in verticale invece che orizzontale?

in pratica che proprietà del Css son necessarie? Float?
 
con float li allinei in orizzontale
Codice:
 ul li {
        float:left;
        padding:8px;
    }
senza in verticale
Codice:
 ul ul li{
        float:  none;
    }
ho specificato none perche con l'istruzione di prima gli avevo assegnato il float:left
il float è da assegnare ai tag <li>
 

Discussioni simili