Menu verticale con subvoci

peppepegasus

Utente Attivo
20 Ott 2006
108
0
0
ciao,

ho cercato dei menu verticali che abbiano delle sottovoci e da poter integrare facilmente in un template. Vorrei usare solo CSS senza javascript, jquery e quant'altro, solo CSS.
Però non sono riuscito a trovare nulla che riuscisse ad essere integrato e fosse funzionante.
Mi sono proposto di utilizzare il menu del template e aggiungere le sottovoci con la definizione delle proprietà CSS per fare tale menu.
Il codice è questo:

Codice:
<ul>
	<li class="title">Menu</li>
	<li class="group"><a href="">Voce1</a></li>		
	<li class="group"><a href="">Voce2</a></li>
	<ul>
	        <li><a href="">Sottovoce1</a></li>
		<li><a href="">Sottovoce2</a></li>
		<li><a href="">Sottovoce3</a></li>
	</ul>
	<li class="group"><a href="">Voce3</a></li>
	<li class="group"><a href="">Voce4</a></li>
	<li class="group"><a href="">Voce5</a></li>			
</ul>
Le voci del menu sono: Menu, Voce1, Voce2, Voce3, Voce4, Voce5. Sulla Voce2 cliccando sopra mi devono apparire le Sottovoce1,2 e 3, cliccando sulla Voce2 se è aperto il menu delle sottovoci devono sparire.
Qualcuno mi può aiutare a definire le proprietà del sottomenu per l'apertura e chiusura delle Sottovoci1,2,3?
grazie spero di essere stato chiaro nella mia richiesta!
Grazie!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Una soluzione con i css potrebbe essere questa

HTML:
<style type="text/css">
    ul {
        margin: 0;
        list-style-type: none; 
    }
    ul ul{
        width: 120px;
        display: none;
    }
    ul li:hover ul{
        display: list-item;
    }
</style>
<ul>
    <li class="title">Menu</li>
    <li class="group"><a href="">Voce1</a></li>		
    <li class="group"><a href="">Voce2</a>
        <ul>
            <li><a href="">Sottovoce1</a></li>
            <li><a href="">Sottovoce2</a></li>
            <li><a href="">Sottovoce3</a></li>
        </ul>
    </li>
    <li class="group"><a href="">Voce3</a></li>
    <li class="group"><a href="">Voce4</a></li>
    <li class="group"><a href="">Voce5</a></li>			
</ul>
Sfrutta l'evento hover

per l'evento onclick credo sia necessario javascript

PS: l 'ul interna deve essere racchiusa nel tag li come ho postato