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>
cosa vuoi fare? – mmativ
Quando eseguo lo snippet di codice funziona esattamente come lo desideri, c'è qualcosa che mi manca? Post scriptum il tuo post è FANTASTICO! –
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