0
Ich bin neu sowohl auf Web-Design und Stack-Überlauf. Ich bemerkte, dass es eine ähnliche Frage zu meinem Stack-Überlauf gab, aber meine Frage wurde dort nicht beantwortet, also poste ich meine eigene, hoffe, du kannst helfen! Ich habe versucht, ein Dropdown-Menü zu erstellen, das nicht nur erscheint, sondern auch die Elemente darunter bewegt. Mein Hauptanliegen ist jetzt jedoch das Dropdown-Menü. Ich habe Position hinzugefügt: relativ zum Elternteil und set: hover, um das Dropdown anzuzeigen, aber ohne Ergebnis. Heres mein Code:HTML Drop-Down-Menü wird nicht angezeigt, obwohl: Hover und Display-Block wurde eingestellt
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("nav").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.getElementById("nav").style.marginLeft = "0";
}body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: crimson;
overflow-x: hidden;
transition: 0.5s;
padding-top: 80px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.3s;
}
.sidenav #menu-list:hover,
.offcanvas a:focus {
color: crimson;
background-color: white;
}
.sidenav a:hover,
.offcanvas a:focus {
color: white;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#menu-list {
padding-top: 17px;
padding-bottom: 17px;
text-align: center;
padding-right: 33px;
}
#main {
transition: margin-left .5s;
padding: 16px;
padding-top: 55px;
left: 0;
right: 0;
top: 0;
width: 100%;
}
#nav {
transition: .5s;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 6%;
background-color: white;
position: fixed;
z-index: 1;
width: 100%;
}
#nav-element {
text-align: left;
width: 120px;
display: inline;
color: crimson;
}
#red-logo {
margin-left: 50px;
font-size: 30px;
color: crimson;
}
#heading {
font-size: 45px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
li {
list-style-type: none;
}
#dropdown {
display: none;
width: 40px;
}
#dropdown a {
color: white;
display: block;
}
.test {
position: relative;
}
a .test:hover > #dropdown {
display: block;
}<!DOCTYPE html>
<html>
<head>
<title>Red Storm News</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a id="menu-list" href="/redstormtv/redstormtv.html">Red Strom TV</a>
<a id="menu-list" class="test">The News
<ul id="dropdown"> #What i'm trying be a dropdown
<li><a href="/schoolnews/schoolnews.html">School News</a>
</li>
<li><a href="/schoolsports/schoolsports.html">School Sports</a>
</li>
<li><a href="/worldnews/worldnews.html">World News</a>
</li>
</ul>
</a>
<a id="menu-list" href="/archives/archives.html">Archives</a>
<a id="menu-list" href="/partners/partners.html">Partners</a>
</div>
<div class="container" id="nav">
<div id="nav-element">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Menu</span>
</div>
<div id="nav-element">
<a id="red-logo" href="index.html">Red Strom News</a>
</div>
</div>
<div class="container" id="main">
#type text here#
</div>
</body>
</html>Vielen Dank im Voraus!
Überprüfen Sie Ihre Konsole im Browser, um zu sehen, ob es einige andere nicht verwandte JavaScript-Fehler gibt, die dies zu brechen ... nur mit dem CSS und HTML in Codepen funktioniert für mich. – patrickhawley
@patrickhawley Wie hast du es in Codepen zu arbeiten, ich habe es in Code-Stift, aber das Dropdown-Menü hat nicht funktioniert, ich habe auch verschiedene Browser und das gleiche Ding ausprobiert –