0
私はウェブデザインとスタックオーバーフローの両方に新しいです。私はスタックオーバーフローについて私に似た質問があることに気づいたが、私の質問はそこに答えられなかったので、私は自分自身を投稿している、あなたが助けることを願って！私はドロップダウンメニューを作成しようとしているだけでなく、その下にある要素を押して移動します。今私の主な懸念はドロップダウンメニューです。私は位置を追加しました：parentとset：hoverでドロップダウンを表示しますが、結果は表示されません。相続人はすべて私のコード：htmlと表示ブロックが設定されていてもhtmlドロップダウンメニューが表示されない
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>事前にありがとうございました！
これは私のためにcodepen作品でちょうどCSSとHTMLを使用して...破るさせるいくつかの他の無関係のJavaScriptエラーがあるかどうかを確認するためにブラウザでコンソールをチェックしてください。 – patrickhawley
@patrickhawleyどうやってコードペンで動作させたのですか？コードペンに入れましたが、ドロップダウンメニューがうまくいかず、別のブラウザと同じことを試みました –