2016-04-22 19 views
5

Questo è il mio primo post in assoluto per Stack Overflow e non ho familiarità con i regolamenti del forum con la pubblicazione. Quindi per favore fammi sapere qualsiasi cosa che ho fatto di sbagliato. Ho cercato questo problema nei forum e nulla di ciò che ho trovato mi dà una risposta chiara.html css menu a discesa

Sto cercando di creare un menu a discesa dall'elemento "Notizie", ma non ottengo mai alcun risultato visibile durante l'esecuzione del codice. Ho provato a modificare il valore di .dropdown-content in block per vedere se renderebbe visibile la lista, ma non è stato mostrato nulla. Cosa mi manca?

body{ 
 
\t background-image: url("images/seamless-panda-bear-pattern.jpg"); 
 
\t font-size: 100%; 
 
\t width: 80%; 
 
\t margin: auto; 
 
\t font-family: Palatino,"Palatino", Arial; 
 

 
} 
 

 
#top{ 
 
\t background-color: black; 
 
\t color: white; 
 
\t padding-left: 10px; 
 
\t border: 2px solid white; 
 
\t font-family: Copperplate,"Copperplate Gothic Light",fantasy; 
 
\t opacity: 0.85; 
 
\t padding-left: 25px; 
 
} 
 

 
#menu{ 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
\t background-color: #333; 
 
\t position: fixed; 
 
\t width: 80%; 
 
} 
 
li{ 
 
\t float: left; 
 
} 
 

 
#login{ 
 
\t float: right; 
 
\t padding-right: 20px; 
 
} 
 

 
li a{ 
 
\t display: block; 
 
\t color: white; 
 
\t text-decoration: none; 
 
\t text-align: center; 
 
\t padding: 14px 16px; 
 

 
} 
 
li a:hover{ 
 
\t background-color: white; 
 
\t color: black; 
 
} 
 

 
li.dropdown{ 
 
\t display: inline-block; 
 
} 
 

 
.dropdown-content{ 
 
\t display: none; 
 
\t position: absolute; 
 
\t background-color: #f9f9f9; 
 
\t min-width: 160px; 
 
\t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2); 
 
\t padding: 12px 16px; 
 
\t z-index: 1; 
 
} 
 

 
.dropdown-content a{ 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t padding: 12px 16px; 
 
\t color: black; 
 
} 
 

 
.dropdown:hover .dropdown-content{ 
 
\t display: block; 
 
} 
 

 

 
#bio{ 
 

 
} 
 

 
#bottom{ 
 

 
}
<div id="nav"> 
 
<ul style="list-style-type: none" id="menu"> 
 
\t <li><a href="home.html">Home</a></li> 
 
\t <li class="dropdown"><a class="dropbtn" href="#">News</a> 
 
\t \t <div class="dropdown-content"> 
 
\t \t \t <a href="#">Games</a> 
 
\t \t \t <a href="#">Web Design</a> 
 
\t \t \t <a href="#">Travel</a> 
 
\t \t </div> 
 
\t </li> 
 
\t <!-- create a link to a part of the same page for contact info --> 
 
\t <li><a href="#bottom">Contact info</a></li> 
 
\t <li id="login"><a href="login.html">Log In</a></li> 
 
</ul> 
 
</div>

+0

cosa vuoi fare? – mmativ

+3

Quando eseguo lo snippet di codice funziona esattamente come lo desideri, c'è qualcosa che mi manca? Post scriptum il tuo post è FANTASTICO! –

+1

Hai effettivamente fatto ciò che la maggior parte delle persone non ha e fornito abbastanza codice. SÌÌ!!! A proposito, funziona anche sul mio browser, CHROME. – Velocibadgery

risposta

4

per risolvere il tuo problema di posizione fissa. È possibile aggiungere position: fixed;-#nav e modificare la larghezza su #menuwidth: 80%;-width: 100%;

Ecco un JS Fiddle.

Spero che abbia aiutato!

+0

Grazie mille! –

+1

Sei il benvenuto! Fai domande GRANDI! –

+0

L'unico problema riscontrato è che l'elemento di accesso non galleggia più a destra dello schermo. Si trova accanto a Informazioni di contatto. C'è un modo per risolvere questo problema? –