[css] Menu orizzontale a 3 livelli

Ciao a tutti, eccomi nuovamente qui a chiedere il vostro soccorso..

Ho creato un menu orizzontale a tendina, però solo a 2 livelli.
Ora vorrei aggiungere un terzo livello però usando solo CSS (gli altri livelli sono stati fatti solo con CSS).

Potete darmi una mano? Io ho cercato sia sul forum che su internet ma non sono riuscito ad ottenere il risultato voluto.

Ecco il codice CSS:

Codice:

---

ul#menu_2livelli{
float: left;
margin: 0;
padding: 0;
border-top: 1px solid #D76120;
border-bottom: 1px solid #D76120;
border-left: 1px solid #D76120;
background: #2D4E6C;
list-style:none;
font:1em Trebuchet MS;
}

ul#menu_2livelli > li > ul > li{
list-style:none;
margin:0;
padding:0;
}

ul#menu_2livelli > li{
float:left;
margin: 0;
padding: 0;
border-right: 1px solid #D76120;
color:black;
}

ul#menu_2livelli a:link,
ul#menu_2livelli a:visited{
display: block;
padding: 4px 16px;
color: #fff;
text-decoration: none;
}

ul#menu_2livelli a:hover,
ul#menu_2livelli a:focus,
ul#menu_2livelli a:active{
background-color: #D76120; //Colore selezione
color: #FFFFFF;  //Colore scritta nella selezione
text-decoration: none;
}

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

ul#menu_2livelli > li:hover > ul{
display: block;
position: absolute;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid #D76120;
background: #2D4E6C;
font-size:0.8em;
}

ul#menu_2livelli > li > li {
border-bottom:1px solid #D76120;
width: 150px;
}

---

Ecco il codice HTML:

Codice:

---

<ul id="menu_2livelli">
                <li><a href="#">Codici di scrittura &raquo;</a>                 
                        <ul>
                                <li><a href="#">Webdesigner &raquo;</a>
                                <li><a href="#">Programmare &raquo;</a></li>
                        </ul>
                </li>
                <li><a href="#">Hacker &raquo;</a>                 
                        <ul>
                                <li><a href="#">10 regole</a></li>                       
                                <li><a href="#">DDOS &raquo;</a></li>
                                <li><a href="#">Password &raquo;</a></li>
                                <li><a href="#">Virus</a></li>
                                <li><a href="#">Unix</a></li>
                                <li><a href="#">Programmi utili</a></li>
                        </ul>
          </li>
                <li><a href="#">Altro &raquo;</a>                 
                        <ul>
                                <li><a href="#">Informatica</a></li>
                                <li><a href="#">Consigli utili</a></li>
                                <li><a href="#">Blocco Note</a></li>
                                <li><a href="#">Prompt dei comandi</a></li>
                        </ul>
          </li>
                <li><a href="#">Regolamento</a>               
          </li>
                <li><a href="#">Contattaci</a>                 
          </li>
                <li><a href="#">Wiki &raquo;</a>                 
                        <ul>
                                <li><a href="#">Codici di scrittura</a></li>
                                <li><a href="#">Hacker</a></li>
                                <li><a href="#">Altro</a></li>
                                <li><a href="#">Regolamento</a></li>
                        </ul>
                                </li>
        </ul>

---

Qualcuno in oltre potrebbe spiegarmi come sistemare il problema della compatibilità tra i diversi browser?
Su Chrome e Firefox mi si vede come vorrei che venisse, ma con Explorer sballa tutto, il menu orizzontale diventa verticale e con tutte le "tendine" aperte,..
Potete aiutarmi?

Dunque, noto che per i menù hai specificato una larghezza fissa, dunque per i sotto menù di terzo ordine per farli apparire a destra sarà sufficiente posizionarli in modo assoluto e specificare nelle proprietà top e left rispettivamente i valori 0 e la larghezza del menù (quello in cui è contenuto). L'elemento li contenitore del menù in questione dovrà anche avere posizionamento relativo.

Dimenticavo: hai usato una sintassi per i commenti che in CSS non esiste, puoi usare solo i commenti di tipo blocco del C, non quelli che hai usato.

Grazie.. ora provo.. e per quanto riguarda la compatibilità con IE?

Proprio non mi risulta il 3 livello :/ potresti abbozzarmi un codice e magari affiancarli una spiegazione?

PS: Sono una frana haha

Ci sono quasi riuscito.. devo smanettarci un po su.. comunque vorrei dire un grazie a tutti, anche grazie a voi la mia voglia di riuscire a fare qualcosa aumenta, vedendo come riuscite a risolvere i miei problemi che trovo complicati.... ho sempre più voglia di superarvi e magari in futuro essere io ad aiutare voi :)

PS: Momento sdolcinato haha

Ok.. ho smanettato e ci sono riuscito, ora ho un piccolo problema..
Vi posto il codice (artigianale xD)
CSS:

Codice:

---

ul#menu_2livelli > li:hover > ul > li > ul{
position: absolute;
visibility: hidden;
}

ul#menu_2livelli > li:hover > ul > li:hover > ul{
position: relative;
display: block;
border:1px solid #D76120;
background: #2D4E6C;
list-style: none;
widht: 150px;
height: 100%;
float: left;
margin: -25px 0 0 150px;
visibility: visible;
}

---

HTML:

Codice:

---


<ul id="menu_2livelli">
                <li><a href="#">Codici di scrittura &raquo;</a>                 
                        <ul>
                                <li><a href="#">Webdesigner &raquo;</a>
                                        <ul>
                                        <li><a href=#">Introduzione</a></li>
                                        <li><a href=#">Sfondo</a></li>
                                        <li><a href=#">Testo</a></li>
                                        <li><a href=#">Link</a></li>
                                        </ul>
                                </li>
                                <li><a href="#">Programmare &raquo;</a>
                                <ul>
                                        <li><a href=#">QWERTY</a></li>
                                        <li><a href=#">QWERTY</a></li>
                                        <li><a href=#">QWERTY</a></li>
                                        </ul>
                                </li>
                        </ul>
                </li>

---

Mi risulta come vorrei (qualche piccolo dettaglio da sistemare) ma il problema e che se si passa sulla scritta Web Designer si apre il menu laterale però si crea anche una distanza tra Web Designer e Programmare che equivale alle dimensioni del menu che si è aperto.
Come posso evitare questo fastidioso fatto?

Questo accade poiché hai posizionato l'elemento ul in modo relativo. Questa modalità di posizionamento non rimuove l'elemento dal flusso della pagina, quindi tutti gli altri elementi si comportano come se fosse ancora lì al suo posto, lasciando quel buco.
Devi posizionarlo come ti ho scritto prima in modo assoluto.
Ricorda però di posizionare in modo relativo l'elemento li che lo contiene, altrimenti il valore specificato con la proprietà top rappresenterebbe la distanza tra il margine superiore del menù di terzo livello e quello del menù di secondo, a te invece interessa che sia allineato con la voce di menù corrispondente.

Inoltre rimuovi quel float, una volta che fai uso del posizionamento assoluto viene ignorata, e anche specificare la proprietà display è superfluo, è già per definizione un elemento blocco.

Potresti dirmi di quale li devo impostare il valore position: relative;? Del contenitore "totale" o per i li che contengono le voci del 3 menu... temo di non aver compreso con chiarezza..

Lo spazio me lo elimina, però le altre liste non si vedono a meno che tu non gli passi sopra con il mouse, si vede solo la prima voce. (SEMPRE DEL 3 LIVELLO).

Intendo l'elemento li padre, ovvero l'ultimo che appare nel selettore ul#menu_2livelli > li:hover > ul > li:hover > ul. Non potresti caricare tutto sul tuo spazio web e indicare l'indirizzo qui? Così è più facile aiutarti.

Il menu in verticale lo cambio, e comunque qui ho messo i pezzi che poi andrò ad impostare nella pagina.. per adesso sto vedendo come farli xD
Comunque ecco la pagina

Vorrei anche eliminare quel fastidioso spazio che si crea quando apri il terzo livello tra la scritta ed il secondo livello..

Allora, visualizzi solo la prima voce a causa della proprietà height, che rende il blocco alto quanto l'elemento li che lo contiene. Comunque ti consiglio di impostare tutti i margini e i padding degli #menu_2livelli ul, e posizionare i menù di terzo livello con top e left. Inoltre c'è ancora quel float che non serve a niente.

Non ho capito bene a che spazio ti riferisci, credo sia quello causato dal padding, azzeralo per tutti come ti ho scritto sopra.

Comunque, per sviluppare fai uso dei diversi strumenti che mettono a disposizione i diversi browser? Sono molto utili anche per imparare.

Quali strumenti? xD

PS: Risolto.. grazie mille :D :D :D *_*

Comunque potresti definire meglio top e left? xD

Strumenti per webmasters, su Firefox c'è il componente aggiuntivo Firebug o, nelle ultime versioni diversi strumenti integrati (li trovi nel menù sviluppo web, oppure li puoi attivare direttamente dal menù contestuale, scegliendo la voce Analizza elemento); su Chrome è lo stesso: da menù contestuale (Ispeziona elemento) oppure con la scorciatoia CTRL+SHIFT+I.

Con questi strumenti puoi per esempio cambiare al volo il foglio di stile e vedere immediatamente i cambiamenti.

Si.. non conoscevo bene il loro utilizzo ;)

Come si uppano su alter per fare uscire il menu?

Citazione:

---

Originalmente inviato da Hackedforum

Come si uppano su alter per fare uscire il menu?

---

Non ho capito la domanda xD