Menu dropdown che fa abbassare il contenuto della pagina

**Fix87** · 21-04-2013, 23:56

Salve a tutti,
sto creando un piccolo sito con un menu dropdown.
Il menu è contenuto all'interno di un div e questo div non ha l'altezza preimpostata, quindi ogni volta che si passa sul menu e si aziona l'hover il div si espande e di conseguenza fa scendere l'intera pagina. Non c'è una soluzione per far si che il submenu "oltrepassi" il div senza farlo espandere oltre a impostare un'altezza predefinita?

**ac_socmel** · 22-04-2013, 12:11

http://forum.html.it/forum/showthrea...4#post13844874

**Fix87** · 22-04-2013, 12:45

Beh non posso dire che non ho cercato perchè non esisteva quel post quando ho fatto la ricerca

lo so è pessima come battuta

Ma lo z-index è applicabile soltanto ai div? O anche a qualsiasi elemento blocco?

**ac_socmel** · 22-04-2013, 12:51

z-index lo puoi applicare a elementi con position diversa da static, quindi: relative absolute oppure fixed

edit:
si può applicare anche a elementi di tipo inline come le immagini o gli span

**Fix87** · 22-04-2013, 16:37

Niente da fare ancora non ho capito.
Riporto il codice che non riesco a modificare

HTML

codice:

<body>
     <div id="menu">
          <ul id="nav">[*]Home Page
                    <ul>[*]Benvenuti[*]Storia[*]Servizi[/list]
               [*]Tour virtuale[*]Prenotazioni[*]Guestbook[*]Contatti[/list]
          <div style="clear:both;"></div>
    </div>
    <hr id="barra" />
</body>

CSS

codice:

<style>
     ul, li{
          margin:0;
          padding:0;
     }
     ul{
          list-style:none;
     }
     #menu{
          border:1px solid #000;
          position:relative;
          z-index:2;
     }
     #nav li{
          float:left;
          margin-left:30px;
     }
     #nav li a{
          display:block;
          width:100px;
          text-align:center;
          background-color:rgba(0,0,0,0.2);
          border-radius:1em;
          box-shadow:0 3px 5px #666666;
          text-decoration:none;
          color:#F3EA3A;
     }
     #nav li a:hover{
          background-color:rgba(0,0,0,0.4);
     }
     #nav li ul{
          display:none;
     }
     #nav li:hover ul{
          display:block;
     }
     #nav li ul li{
          float:none;
          margin:5px 0 0 0;
     }
     #barra{
          position:relative;
          z-index:1;
     }
</style>

**ac_socmel** · 22-04-2013, 17:08

per esempio:
devi dare position relative ai vari[*] e position absolute al <ul> che racchiude il sottomenù
quindi

codice:

#nav li {
   position: relative
}
#nav li ul {
   position: absolute;
   z-index: 2
}

prova e dicci

**Fix87** · 22-04-2013, 18:42

Sei un grande

Non c'è stato neanche bisogno di mettere il z-index ho semplicemente risolto così:

codice:

<style>
     ul, li{
          margin:0;
          padding:0;
     }
     ul{
          list-style:none;
     }
     #nav li{
          float:left;
          margin-left:30px;
          position:relative; 
     }
     #nav li a{
          display:block;
          width:100px;
          text-align:center;
          background-color:rgba(0,0,0,0.2);
          border-radius:1em;
          box-shadow:0 3px 5px #666666;
          text-decoration:none;
          color:#F3EA3A;
     }
     #nav li a:hover{
          background-color:rgba(0,0,0,0.4);
     }
     #nav li ul{
          display:none;
          position:absolute; 
     }
     #nav li:hover ul{
          display:block;
     }
     #nav li ul li{
          float:none;
          margin:5px 0 0 0;
     }
</style>

Sinceramente non capisco perchè se in absolute i li del menu principale e in relative il sottomenu questo non mi provoca più l'adattamento da parte del div menu.

Se hai pazienza potresti spiegarmi cosa succedeva prima e cosa succede ora?

**ac_socmel** · 22-04-2013, 20:34

non farmi questo
non chiedermi spiegazioni, perchè sono un pessimo insegnante e non saprei trovare parole diverse da quelle usate
ma se chiedi ai nostri moderatori sono sicuro che ti spiegheranno meglio quanto ti ho suggerito

**deleted_129** · 22-04-2013, 20:45

In realtà il codice è sbagliato..nel senso che..se provi a dare uno sfondo ad ogni contenitore, vedi come è disordinato...in effetti , l'effetto così sembra essere perfetto..in realtà con il position absolute, il contenitore sotto non "calcola" più quello sopra...e sta fermo la'...anche se quello sopra diventa più grande a lui non importa perchè avendo position diverse è come se fossero su due livelli diversi ( un po' come lo z-index)...servirebbe uno studio teorico per capirlo bene, io non ti so spiegare..cmq in poche parole il contenitore sotto non vede quello sopra

...anche se provi a mettere un HEIGHT al menù il contenitore sotto non si abbassa..xk non lo calcola...questo è un lato molto brutto dell'absolute, spesso porta in errore...

**Fix87** · 25-04-2013, 16:16

Ho provato a dare uno sfondo ad ogni contenitore e ad aumentare anche l'altezza dell'height ma non vedo problemi, nel senso che se do un background al li del sub menu ovviamente mi crea un background solanto ai singoli "li del submenu", se invece do un background allo "ul del submenu" mi crea un rettangolo che comprende tutti i "li" del submenu, quindi lavora bene direi il codice. Posto il codice con l'ultima modifica fatta che comprende soltanto il position:absolute del sottomenu e nessun position:relative per il menu di sopra!

HTML

codice:

<div id="menu">
     <ul id="nav">[*]Home Page
               <ul>[*]Benvenuti[*]Storia[*]Servizi[/list]
          [*]Tour virtuale[*]Prenotazioni[*]Guestbook[*]Contatti[/list]
     <div style="clear:both;"></div>
</div>

CSS

codice:

#menu{
     margin:0 auto;
     width:700px;
}
#nav li{
     float:left;
     margin-left:30px;
}
#nav li a{
     display:block;
     width:100px;
     text-align:center;
     background-color:black;
     border-radius:1em;
     box-shadow:0 3px 5px #666666;
     text-decoration:none;
     color:#F3EA3A;
}
#nav li a.paginaCorrente{
     background-color:#F3EA3A;
     color:black;
}
#nav li a:hover{
     background-color:#F3EA3A;
     color:black;
}
#nav li ul{
     display:none;
     position:absolute ;
}
#nav li:hover ul{
     display:block;
}
#nav li ul li{
     float:none;
     margin:5px 0 0 0;
}

Come potete notare ho evidenziato in rosso il position absolute ed è l'unica regola di position che ho inserito, non ho neanche bisogno del relative per i li del menu generale. Davvero non ci capisco niente con questi position!

Vi posto inoltre un'immagine con e senza l'absolute per farvi vedere di quello che succede!

Discussione: Menu dropdown che fa abbassare il contenuto della pagina

Strumenti discussione

Ricerca discussione

Visualizza

Menu dropdown che fa abbassare il contenuto della pagina

Permessi di invio