Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2005
    Messaggi
    31

    Menu dropdown in una navbar fissa

    Sto cercando di aggiungere un menu a discesa all'interno di una barra di navigazione. Sto utilizzando il codice fornito da https://www.w3schools.com/css/css_dropdowns.asp, ma quando cerco di fissare la barra nella parte superiore della pagina, il menu a discesa non viene più visualizzato.
    Ecco il codice con un menu a discesa funzionante:
    codice:
    <!DOCTYPE html>
    <html lang="it">
    <head>
    <meta charset="UTF-8">
    <style>
    body {margin:0;}
    
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }
    
    li {
      float: left;
    }
    
    li a, .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    li a:hover, .dropdown:hover .dropbtn {
      background-color: red;
    }
    
    li.dropdown {
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .dropdown-content a:hover {background-color: #f1f1f1;}
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    </style>
    </head>
    <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="#" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
    
    <div style="margin:20px;">
    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p style="height:3000px;">This should be a simple responsive webpage with a fixed navbar and a dropdown menu.</p>
    </div>
    </body>
    </html>

    Ma se modifico il CSS così...
    codice:
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      position: fixed;
      width: 100%;
      top: 0;
    }

    ...il menu a discesa non compare più.
    Come posso fare?
    Grazie.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,743
    Ciao, penso che il problema sia l'uso di overflow:hidden.

    Finché <ul> ha position:static (valore di default), il suo overflow non influisce sui contenuti (discendenti) che hanno position:absolute (nel tuo caso, .dropdown-content) ma nel momento che <ul> è impostato con un position diverso da static (in questo caso lo hai impostato come fixed), anche i contenuti con position diverso da static sono sottoposti all'azione di quell'overflow.

    Potresti risolvere rimuovendo semplicemente overflow:hidden, se questo non ti crea problemi collaterali.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2005
    Messaggi
    31
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, penso che il problema sia l'uso di overflow:hidden.
    Grazie, con un po' di tentativi ci sono arrivato.
    Ciao!

  4. #4
    posta la soluzione, magari può aiutare qualcun altro

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2005
    Messaggi
    31
    Ho semplicemente rimosso l'
    codice:
    overflow:hidden
    , come suggerivi anche tu.
    Grazie!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.