menu a cascata, evidenziare voce selezionata

[volodos]

Buongiorno a tutti, non sono ben sicuro se sia questa la sezione adatta o debba invece riferirmi alla sezione CSS.Chiedo un aiuto in merito alla configurazione di una voce di menu a cascata nella quale non riesco ad impostare la classe ACTIVE senza che tale classe venga applicata anche alle sottosezioni. Allegherò sotto i codici della pagina hml e css, ho necessità di evidenziare la voce di menu SERVIZI (senza collegamento ipertestuale in quanto non esiste un collegamento specifico a tale pagina, bensì un collegamento a ciascuna sottosezione. Per tale motivo ho utilizzato il tag SPAN ma non sicuro di aver operato correttamente) nel momento in cui risulta attiva una delle 5 pagine collegate a tale voce di menu. Non riesco a venirne a capo, vi ringrazio anticipatamente.

CODICE HTML:

================================================== =========================

<nav id="nav">
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="su-di-noi.html">Su di noi</a></li>
<li><span class="nav">Servizi ▾</span>
<ul class="dropdown">
<li><a href="#">Sottosezione1</a></li>
<li><a href="#">Sottosezione2</a></li>
<li><a href="#">Sottosezione3</a></li>
<li><a href="#">Sottosezione4</a></li>
<li><a href="#">Sottosezione5</a></li>
</ul>
</li>
<li><a href="contatti.hml">Contatti</a></li>
</ul>
</nav>

================================================== =========================

CODICE CSS:

#nav
{
position: absolute;
right: 0em;
top: 2.2em;
}

#nav > ul > li
{
float: left;
}

#nav > ul > li:last-child
{
padding-right: 0;
}

#nav > ul > li > a,
#nav > ul > li > span
{
display: block;
margin-left: 0.7em;
padding: 0.80em 1.2em;
letter-spacing: 0.06em;
text-decoration: none;
text-transform: uppercase;
font-size: 1.1em;
outline: 0;
color: #333;
}

#nav li.active a
{
background: #e95d3c;
border-radius: 5px;
color: #FFF;
}

#nav > ul > li > ul
{
display: none;
}


#nav ul li ul.dropdown
{
min-width: 200px; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
text-decoration: none;
line-height: 250%;
}

#nav ul li:hover ul.dropdown
{
display: block; /* Display the dropdown */
}

#nav ul li ul.dropdown li
{
display: block;
margin-left: 1em;
}

[volodos]

nessuno in grado di aiutarmi ?

[Vincent.Zeno]

ho necessità di evidenziare la voce di menu SERVIZI (senza collegamento ipertestuale in quanto non esiste un collegamento specifico a tale pagina, bensì un collegamento a ciascuna sottosezione.

quindi le sottosezioni sono pagine reali?
lo chiedo perché dal codice riportato non risulta

[volodos]

quindi le sottosezioni sono pagine reali?
lo chiedo perché dal codice riportato non risulta

sì, le sottosezioni sono pagine reali. Nel codice qui riportato ho semplicemente tolto gli indirizzi delle pagine.

[Vincent.Zeno]

allora, semplicemente, attribuisci la classe che colora la selezione alla voce "servizi". così come faresti per le altre pagine.

ricorda di usare il tag [CODE][/CODE] per postare codice sul forum (vedi tasto # in modalità avanzata), grazie

[volodos]

allora, semplicemente, attribuisci la classe che colora la selezione alla voce "servizi". così come faresti per le altre pagine.

ricorda di usare il tag [CODE][/CODE] per postare codice sul forum (vedi tasto # in modalità avanzata), grazie

OK. se invece volessi inserire un collegamento ipertestuale anche alla voce "servizi" ma senza puntare a nessuna pagina, ovvero:

<nav id="nav">
                        <ul>
                            <li><a href="index.html">Homepage</a></li>
                            <li><a href="su-di-noi.html">Su di noi</a></li>
                            <li><a href="#">Servizi ▾</a>
                              <ul class="dropdown">
                                <li><a href="1.html">Sottosezione1</a></li>
                                <li><a href="2.html">Sottosezione2</a></li>
                                <li><a href="3.html">Sottosezione3</a></li>
                                <li><a href="4.html">Sottosezione4</a></li>
                                <li><a href="5.html">Sottosezione5</a></li>
                              </ul>
                            </li>
                            <li><a href="contatti.hml">Contatti</a></li>
                        </ul>
                    </nav>

come dovrei fare in questo caso per far sì che, nel momento in cui è aperta una delle 5 sottosezioni, rimanga attiva la voce "Servizi" ? grazie ancora per l'aiuto

[Vincent.Zeno]

bisogna che le pagine "sottosezioni" siano lette come pagina "servizi".
attualmente la colorazione la fai "a mano" o è dinamica?

[volodos]

bisogna che le pagine "sottosezioni" siano lette come pagina "servizi".
attualmente la colorazione la fai "a mano" o è dinamica?

non

non sono pratico della materia e quindi non so bene cosa intenda per "fatta a mano" o "dinamica", posso dirti che la colorazione avviene tramite questa sezione del css:

#nav li.active a
            {
                background: #e95d3c;
                border-radius: 5px;
                color: #FFF;
            }

però se inserico l'active nella voce SERVIZI:

<li class="active"><a href="#">Servizi ▾</a>

non si evidenzia la voce SERVIZI, bensì tutte e 5 le sottosezioni. Come fare ?

[Vincent.Zeno]

aggiungi la regola che corregge la sottolista, qualcosa tipo

#nav li.active a ul li a
            {
                background: #fff; /*colore preferito*/
                border-radius: 5px;
                color: #FFF;
            }

non testato, fai qualche prova
ho raggiunto l'ultimo elemento "a", ma forse nel tuo contesto non è necessario. verifica.

[volodos]

aggiungi la regola che corregge la sottolista, qualcosa tipo

#nav li.active a ul li a
            {
                background: #fff; /*colore preferito*/
                border-radius: 5px;
                color: #FFF;
            }

non testato, fai qualche prova
ho raggiunto l'ultimo elemento "a", ma forse nel tuo contesto non è necessario. verifica.

Niente da fare, si evidenzia la voce SERVIZI ma anche tutte e 5 le sottosezioni, sia con l'ultimo elemento "a", sia senza. Oltre ad aver aggiunto il tuo codice nel css, ho impostato così nella pagina:

<li class="active"><a href="#">Servizi ▾</a>
                                                            <ul class="dropdown">
                                <li><a href="1.html">Sottosezione1</a></li>
                                <li><a href="2.html">Sottosezione2</a></li>
                                <li><a href="3.html">Sottosezione3</a></li>
                                <li><a href="4.html">Sottosezione4</a></li>
                                <li><a href="5.html">Sottosezione5</a></li>
                                                            </ul>
                                                        </li>