Sub Menu Nascosto

**picca** · 08-01-2012, 23:11

Salve a tutto il forum! Mi chiamo Daniela e da molto tempo seguo il sito e il forum di html e devo dire che ho sempre trovato quello che cercavo. Putroppo oggi ho un porblema con il menu di un sito. Ho cercato nel forum ma non ho torvato nulla di ciò...

Brevemente, il mio problema è questo: ho un menu al quale vorrei applicare un sub menu. Ho fatto comparire il sub-menu in qualche modo, ma, lo vedo solo a metà! Cioè il sub-menu viene nascosto da un DIV presente sotto al menu.
Mi sono espresso bene? Spero... Credetemi ho fatto 1000 tentativi, dato che non sono una che si arrende facilmente, ma questo problema proprio non riesco a risolverlo. Che dire... mi affido a voi! Anzi, mi butto sulla vostra saggezza. Vi posto il codice pulito, senza quella schifezza di sub-menu
Ecco il mio HMTL & CSS:

HTML

codice:

<head>
<meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

<link href="css/style.css" rel="stylesheet" />

</head>

<body>

    <div id="container">
    
        <div id="header">
            <h1>##</h1>
            ########
        </div>
        
        <ul id="nav">
            <ul>[*]Home[*]Home2[*]Home3

QUI DOVREBBE ESSERCI IL SUB MENU :-/
[*]Home4[*]Home5[*]Home6[/list][/list]
        
      <div id="banner">
            <h1>Contenuto</h1>
            

Contenuto!</p>
        </div>
        
        <div id="main">
        
            <div id="primary">
                <h2>Intestazione</h2>
                


                Contenuto!
                </p>
                

                

                

                

                

            </div>
            

        </div>
        
    </div>
    
    <div id=”footerWrap”>
        <div id=”footer”>
                      <p id=”footerInfo”>&copy; 2012 | <a href=”#”>#</a></p>
               </div>
    </div>

</body>
</html>

CSS

codice:

@charset "utf-8";
/* CSS Document */

html {
    background-color:#EFEFEF;
}

body {
    text-align:center;
     font-family:Arial, Helvetica, sans-serif;
    font-size:100%;
}

a {
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
    /* color:#FFFFFF; */
}

p {
    color:#43433f;
    line-height:21px;
}

h2 {
    color:#363era;
    font-size:30px;
}

li {
     list-style:none;
}

#container {
    margin:auto;
    width:921px;
    text-align:left;
}

#header {
    position:relative;
}

#header h1 {
    text-indent:5px;
}

#header small {
    color:#a3a3a3;
    position:absolute;
    font-size:14px;
    top:.63em;
    left:203px;
}

#nav {
    background-color:#000;
    overflow:hidden;
    height:57px;
    margin:0 0 6px 0;
    padding:0 0 0 31px;
}

#nav li {
    float:left;
    line-height:57px;
}

#nav li:hover {
    float:left;
    line-height:57px;
    background-color:#339933;
}

#nav li a {
    border-right:1px dotted #aab391;
    padding: 0 1em;
    color:#FFFFFF;
}

#banner {
    height:243px;
    border-top:1px solid #4d688d;
    background-color:#4d688d;
    position:relative;
    z-index:2px;
    margin-bottom:-2.8em;
}

#banner h1 {
    margin-left:247px;
    margin-bottom:0px;
    margin-top:46px;
    color:#ececec;
}

#banner p {
    margin-right:226px;
    margin-left:247px;
    color:#ececec;
    font-size:18px;
    margin-top:.8em;
}

#main {
    position:relative;
    background-color:#FFFFFF;
    padding-bottom:2em;
    
}

#primary {
    background-color:#e6e6e6;
}

#primary h2 {
    padding:26px 0 10px 0;
    margin-left:26px;
    margin-right:57px; /* may remove */
    border-bottom:2px dotted #aab391;
}

#primary p {
    padding-left:36px;
}

/* ------------------------------------

content main here 

------------------------------------ */

#footerWrap {
    border-top: 1px solid white;
    background: #32251f;
}

#footer {
    overflow: hidden;
    color: #a68a7d;
    width: 1002px;
    margin: auto;
    text-align: left;
    padding-top: 35px;
    font-size: 11px;
    line-height: 17px;
    text-transform: uppercase;
    border-right: 1px solid #48362d;
    border-left: 1px solid #48362d;
}

#footer p {
    color: #a68a7d;
    font-size: 11px;
}

/* ------------------------------------

#footer #footerLogo {
    float: left;
    background: #291e18;
    width: 348px;
    text-align: center;
    padding-top: 2.5em;
    padding-bottom: 3em;
    margin-right: 32px;
    margin-top: -35px;
    border-right: 1px solid #48362d;
}

------------------------------------ */

#footer strong a, #footer p a {
    color: white;
    font-weight: bold;
}

#footer p#footerInfo {
    float: right;
    padding-right: 45px;
    margin-top: -17px;
}

Quello è il codice pulito, senza quella schifezza di sub-menu. Il sub-menu dovrebbe comparire sotto la voce Home3 ma viene nascosto dal DIV BANNER sottostante.

Vi ringrazio anticipatamente! Daniela

**nicuccia** · 09-01-2012, 12:09

La butto lì.. hai provato a modificare lo z-index:2px; presente nel div del banner? Lo z-index viene utilizzato per organizzare l'ordine di sovrapposizione di elementi che potrebbero risultare sovrapposti.. Senza provare il codice penso che l'errore potrebbe essere questo.. è come se il div del banner si visualizza sopra tutto il resto perché ha un valore di z-index maggiore..

P.S. Passami il codice del sub menù che avevi realizzato.. Intanto fammi capire, al passaggio del mouse sulle voci di menù vuoi che compaia il submenù? utilizzi qualche script in particolare?

**picca** · 09-01-2012, 20:16

Ti adoro! Cambiando il valore z-index ora il menu viene visualizzato sopra. Per sicurezza al menu ho dato un z-index:9999; :-D ... Ora il problema è questo dannato sub menu! Possibile che ci vuole un anno per fare un semplicissimo sub-menu con puro CSS senza JavaScript? :-/

Ecco il codice che avevo provato a fare con il sub-menu:

codice:

         <ul id="nav">
[*]
                    Home
                
                [*]
                    Itinerari
                
                [*]
                    Gallery

                        <ul>[*]Sub[*]Sub                [*]Sub[*]Sub            [/list]
                
                [*]
                    Webcam
                
                [*]
                    Stazione Meteo
                
                [*]
                    Contatti
                
                [/list]

Questo è il DIV contenente tutto il menu. Vorrei semplicemente che al passaggio sulla voce Gallery venga aperto un sub menu con altre voci, e che alcune di esse aprano un altro sub menu. Praticamente: Gallery ---> Sub Sub Sub Sub Sub ... --> Subsub --> Subsub ... In pratica 3 livelli. Ne stò uscendo matta! Grazie mille per l'interessamento. Ciao, Daniela.

**nicuccia** · 10-01-2012, 09:30

Onestamente soltanto utilizzando CSS non so se sia possibile realizzarlo.. O almeno io non ne sono in grado

L'unica cosa che sono riuscita a fare e che al passaggio del mouse su una voce principale come gallery, visualizzo sulla stessa riga le voci del submenu.. Però non è moltissimo onestamente.

Posso chiederti come mai non vuoi utilizzare un javascript o meglio ancora un jquery? Il tuo lavoro ne gioverà tantissimo! Ed esistono moltissimi script davvero graziosi e facilissimi da implementare!

A presto

Mi rettifico: ho trovato in giro per la rete tre link utilissimi.. Vedi se possono fare al caso tuo.. Link 1 Link 2 Link 3

Io nel mentre provo ad implementarne uno nel tuo template e ti faccio sapere.

**Mich_** · 10-01-2012, 12:13

Menu solo-CSS ce ne sono moltissimi.
Alcuni sono citati tra i "link utili". A me piace come sono organizzati quelli di CSSPlay.

A mio parere e` piu` semplice prenderne uno pronto e modificarne l'aspetto, piuttosto che reinventare l'acqua calda.

Attenzione ad usare menu in JS: ci sono condizioni in cui non funzioneranno. Sarebbe un pessimo biglietto da visita.
JS si puo` usare per migliorare l'usabilita`, ma la pagina DEVE funzionare anche con JS disabilitato. Questo sia per le norme sull'accessibilita` (vedi ad esempio legge 4/04), ma anche per rispetto degli utenti piu` deboli.

**picca** · 11-01-2012, 00:02

@Nicuccia: Molto gentile e disponibile! Ti ringrazio di cuore per l' aiuto. :-) Alla domanda, perchè non voglio utilizzare JavaScript, ti rispondo: "Io utilizzo il broswer con Java disabilitata! :-D Sono matta? Credo di sì... AhAhAh Battute a parte, come dice Mich_ Java non è molto conveniente.

@Mich_: Grazie anche a te per il sito suggerito. Devo dire che riguardo l' accessibilità sono daccordissimo con te.

Ciao a tutti :-)

**Mich_** · 11-01-2012, 09:44

Originariamente inviato da picca
@Nicuccia: Molto gentile e disponibile! Ti ringrazio di cuore per l' aiuto. :-) Alla domanda, perchè non voglio utilizzare JavaScript, ti rispondo: "Io utilizzo il broswer con Java disabilitata! :-D Sono matta? Credo di sì... AhAhAh Battute a parte, come dice Mich_ Java non è molto conveniente.

@Mich_: Grazie anche a te per il sito suggerito. Devo dire che riguardo l' accessibilità sono daccordissimo con te.

Ciao a tutti :-)

Non aggiungere confusione a confusione.
Pensi a Javascript e scrivi Java. Sono due cose diverse: con Java si fanno i siti lato server (JSP) e le applet (lato client).

Java e` un linguaggio di programmazione compilato; Javascript e` interpretato.
Nella pagine Web, Javascript viene interpretato dal browser, le applet Java vengono fatte girare da una applicazione separata (richiede JVM - Java Virtual Machine).
In molti browser e` possibile disabilitare separatamente Java e Javascript.

Discussione: Sub Menu Nascosto

Strumenti discussione

Ricerca discussione

Visualizza

Sub Menu Nascosto

Grazie.

Grazie

Re: Grazie

Permessi di invio