5
Dies ist meine erste Post zu Stack Overflow und ich bin nicht vertraut mit Forum-Vorschriften mit der Buchung. Bitte lass mich alles wissen, was ich falsch gemacht habe. Ich habe dieses Thema in den Foren recherchiert und nichts, auf das ich gestoßen bin, gibt mir eine klare Antwort.html css Dropdown-Menü
Ich versuche, ein Dropdown-Menü aus dem "News" -Element zu erstellen, aber ich bekomme nie ein sichtbares Ergebnis, wenn Sie den Code ausführen. Ich habe versucht, den .dropdown-contentdisplay Wert zu block zu ändern, um zu sehen, ob es die Liste sichtbar machen würde, aber nichts zeigte. Was vermisse ich?
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>
was möchten Sie tun? – mmativ
Wenn ich das Code-Snippet ausführe, funktioniert es genau so, wie du es willst, gibt es etwas, das mir fehlt? P.S. Dein Beitrag ist großartig! –
Sie haben tatsächlich getan, was die meisten Leute nicht tun und haben genug Code zur Verfügung gestellt. YAY!!! Es funktioniert übrigens auch in meinem Browser CHROME. – Velocibadgery