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!
 
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
 

Discussioni simili