[CSS] barra orizzontale con sottomenu

[fanfa88]

Ciao ragazzi, seguendo varie guide sono riuscito a creare una barra menu orizzontale con dei sottomenu che si aprono al passaggio del mouse. il mio problema è che questi sotto-menu si aprono in verticale mentre io li vorrei in orizzontale. Qualcuno sa dirmi cosa devo modificare all'interno del file css.???? Grazie per l'aiuto...

codice css

ul#menu_a_2livelli{
float: left;
margin: 0;
padding: 0;
background: #transparent;
list-style:none;
font:geneva;
font-weight: bold;
}
ul#menu_a_2livelli li ul li{
list-style:none;
margin:0;
padding:0;
}
ul#menu_a_2livelli li{
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
float:left;
color:006600;
font-weight: bold;
}

ul#menu_a_2livelli a:link,
ul#menu_a_2livelli a:visited{
display: block;
padding: 4px 18px;
color: #006600;
font-weight: bold;
text-decoration: none;
}
ul#menu_a_2livelli a:hover,
ul#menu_a_2livelli a:focus,
ul#menu_a_2livelli a:active{
background-color: #FFff66;
color: #33cc33;
text-decoration: none;
}
ul#menu_a_2livelli li ul{
display: none;
}
ul#menu_a_2livelli li:hover ul{
display: inline;
position: fixed;
z-index:1;
width:125px;
padding: 0;
margin: 0 0 0 0px;
background: #transparent;
font-size:13px;
}
ul#menu_a_2livelli li li {

width: 125px;
}




codice html

<div align="center">
<ul class="Stile1" id="menu_a_2livelli">
<li><a href="mainframe.html" target="mainFrame" class="Stile2">HOME</a>
<ul> </ul>
</li>
<li><a href="chi siamo/presentazione.html" target="mainFrame" class="Stile2">CHI SIAMO</a>
<ul>
<li><a href="chi siamo/presentazione.html" target="mainFrame">Presentazione</a></li>
<li><a href="chi siamo/dove.html" target="mainFrame">Dove Siamo</a></li>
<li><a href="chi siamo/storia.html" target="mainFrame">Storia</a></li>
<li><a href="chi siamo/direttivo.html" target="mainFrame">Il Direttivo</a></li>
</ul>
</li>
<li><a href="scuola vela/presentazione.html" target="mainFrame" class="Stile2">SCUOLA VELA</a>
<ul>
<li><a href="scuola vela/presentazione.html" target="mainFrame">Presentazione</a></li>
<li><a href="scuola vela/corsi.html" target="mainFrame">Corsi</a></li>
<li><a href="scuola vela/foto.html" target="mainFrame">Foto</a></li>
</ul>
</li>
<li><a href="regate/regate.html" target="mainFrame" class="Stile2">REGATE</a>
<ul>
<li><a href="regate/calendariocvv08.html" target="mainFrame">Calendario</a></li>
<li><a href="regate/regate.html" target="mainFrame">Classifiche</a></li>
<li><a href="regate/foto.html" target="mainFrame">Foto</a></li>
</ul>
</li>
<li><a href="#" class="Stile2">NEWS</a>
<ul> </ul>
</li>
<li><a href="#" class="Stile2">FORUM</a>
<ul> </ul>
</li>
</ul>
</div>

[fanfa88]

up..aiuto...:muro:

[fanfa88]

ce l'ho fatta,:D dopo millleee tentativi sono riuscito a fare apparire la barra dei sotto menu in orizzontale...
posto il codice css

ul#menu_a_2livelli{
float: left;
margin: 0;
padding: 0;
background: #transparent;
list-style:none;
font:geneva;
font-weight: bold;

}
ul#menu_a_2livelli li ul li{
list-style:none;
margin:0;
padding:0;
empty-cells:hide;
}


ul#menu_a_2livelli li{
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
float:left;
color:006600; /*colore testo*/
font-weight: bold;

}

ul#menu_a_2livelli a:link,
ul#menu_a_2livelli a:visited{
display: block;
padding: 4px 28px; /*dimensioni celle*/
color: #006600; /*colore testo*/
font-weight: bold;
text-decoration: none;

}

ul#menu_a_2livelli a:focus, ul#menu_a_2livelli a:active, ul#menu_a_2livelli a:hover{
background-color: #ffff77; /*colore sfondo al passaggio del mouse*/
position: relative;
color: #33cc33;
text-decoration: underline;

}



ul#menu_a_2livelli li ul{
display: none;
empty-cells:hide;
}

ul#menu_a_2livelli li:hover ul{ /* impostazioni barra sottomenu*/
display: inline;
position: fixed;
margin: /*asse y*/ -1px /*asse y*/ -80px; /*distanze sottomenu*/
width:585px;
padding: 0;
background: #ffff66; /*colore sfondo sottomenu*/
font-size:13px;
border: 1px solid #D76120;
empty-cells:hide;


}
ul#menu_a_2livelli li li { /* impostazioni celle del sottomenu*/
display: inline;
position: relative;
border-collapse: collapse;
border-right: 1px dotted #D76120;
empty-cells: hide;
width: 145px; /* distanza aperture di ogni sottomenu*/
visibility:visible;

}

[fanfa88]

Ora avrei un'altra domanda, che non so proprio come risolvere da solo; è possibile che una volta selezionata una casella della barra principale essa rimanga selezionata mentre si osserva il sottomenu??? spero di essere stato chiaro..

[fanfa88]

up...non c'è proprio nessuno che sa risolvere il mio problema?????

[Necromachine]

Ciao, posso dirti come ho fatto io un menu del genere:

per la barra orizzontale puoi usare sia i li (o anche dei div) con la proprietà "float:left" (ricordandosi il clear:left alla fine ;) e dare la stessa height a tutti i blocchi per sicurezza), sia una <table> coi vari <td> come voci del menu orizzontale.

Per i menu verticali a scomparsa li ho fatti fissi e con impostato "position:absolute" (e z-index>1) e le voci visualizzate come block e non inline, che è sempre meglio e li ho posti dentro i rispettivi blocchi della barra orizzontale.
Per farli apparire e scomparire ho utilizzato la pseudoclasse ":hover" e per i sottomenu ho fatto 2 classi, una "sottomenu" con display:none e una "sottomenu:hover" che si vede, in questo modo al passaggio del mouse sulla barra orizzontale compaiono anche i menu e scompaione se il mouse si allontana dai menu o dalla barra (mentre sei sul menu verticale l'hover rimane applicato anche al bottone orizzontale).

Una cosa da stare attenti: sotto IE6 l'hover non viene preso dai div o dai td, in tal caso occorre sopperire con un semplice script JS, in IE7 e mozilla tutto ok.

Non so se sono stato chiaro, purtroppo ho sonno e molto lavoro da sbrigare, magari domani posto anche un esempio :D.

[fanfa88]

Necromachine grazie per la risp. pero forse non ho espresso bene il mio problema..Io ho fatto un menu orizzontale con relativo sottomenu orizzontale. Quando passo il mouse su una casella del menu principale, mi appare sotto di esso un ulteriore barra orizzontale con delle caselle. Il problema è il seguente: mentre mi muovo nella barra del sottomenu, è possibile vedere evidenziata la casella della barra principale dalla quale ha origine il sottomenu...il problema è molto difficile da spiegare, spero di essere stato chiaro..grazie ciao

[Necromachine]

Necromachine grazie per la risp. pero forse non ho espresso bene il mio problema..Io ho fatto un menu orizzontale con relativo sottomenu orizzontale. Quando passo il mouse su una casella del menu principale, mi appare sotto di esso un ulteriore barra orizzontale con delle caselle. Il problema è il seguente: mentre mi muovo nella barra del sottomenu, è possibile vedere evidenziata la casella della barra principale dalla quale ha origine il sottomenu...il problema è molto difficile da spiegare, spero di essere stato chiaro..grazie ciao

Penso di sì, dovrebbe essere possibile farlo nello stesso modo con i soli CSS, cambieranno un pò le impostazioni dei position etc., ma il concetto è sempre quello di avere il sottomenu orizzontale dentro l'elemento del menu principale che diventa visibile con l'hover (mantenendo l'elemento del menu principale sempre in hover anche lui).

In ogni caso per andare sul sicuro potresti usare del codice JS (al volo mi viene in mente: attacchi all'evento "onmouseover" o "onclick" del bottone nel menu principale una funzione che visualizzi la seconda barra e modifichi lo stile del bottone stesso).

[fanfa88]

Penso di sì, dovrebbe essere possibile farlo nello stesso modo con i soli CSS, cambieranno un pò le impostazioni dei position etc., ma il concetto è sempre quello di avere il sottomenu orizzontale dentro l'elemento del menu principale che diventa visibile con l'hover (mantenendo l'elemento del menu principale sempre in hover anche lui).

In ogni caso per andare sul sicuro potresti usare del codice JS (al volo mi viene in mente: attacchi all'evento "onmouseover" o "onclick" del bottone nel menu principale una funzione che visualizzi la seconda barra e modifichi lo stile del bottone stesso).

hai afferrato in pieno il problema ;) .. con quale dei due metodi mi consigli di risolverlo? Modificare il file css un po mi preoccupa perchè esclusa questo problemino funziona bene, invece l'idea di utilizzare JS mi potrebbe piacere ma non so nulla del JS :D . E' molto complicato il secondo metodo??