What makes the dropdown menu content "stick" to the menu item? - html

Question

I've almost got my dropdown menu working, but I can't get the dropdown content to appear underneath the head when it's clicked. It's moved off to the side. What's causing that? Is it improperly written position?
Fiddle: https://jsfiddle.net/kiddigit/8sxj3eeg/
* {
font-family: garamond;
line-height: 1.9em;
}
.dropdownwrapper {
padding-top: 2px;
}
.dropbtn {
color: black;
padding: 13px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
/* display: none;*/
position: absolute;
}
.dropdown-content a {
color: white;
padding: 0 27.5px ;
text-decoration: none;
display: block;
background-color: #3f3f3f;
}
.dropdown-content a:hover {
color: #a9a9a9;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: black;
color: white;
}
header {
border-bottom: 5px solid;
margin-bottom: 10px;
overflow: hidden;
}
header ul {
float: right;
list-style-type: none;
margin-top: 22px;
padding:0;
width: 50%;
}
header li {
float: right;
}
header li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
header li a:hover {
background-color: #111;
color: white;
}
header h1 {
float: left;
text-align: left;
line-height: 0;
font-size: 2em;
}
<header>
<h1>Father Bart Gage</h1>
<ul>
<li><a id="about" href="#">ABOUT</a></li>
<li>CONTACT</li>
<div class="dropdownwrapper">
<div class="dropdown">
<li><div class="dropbtn" onClick=”return true”>SCRIPTURE</div></li>
<div class="dropdown-content">
<a id="mark" href="#">Mark</a>
<a id="matthew" href="#">Matthew</a>
<a id="luke" href="#">Luke</a>
<a id="john" href="#">John</a>
</div>
</div>
</div>
</ul>
</header>

Answer 1

You have to move the dropdown-content element into the list item:
<div class="dropdown">
<li>
<div class="dropbtn" onClick=”return true”>SCRIPTURE</div>
<div class="dropdown-content">
<a id="mark" href="#">Mark</a>
<a id="matthew" href="#">Matthew</a>
<a id="luke" href="#">Luke</a>
<a id="john" href="#">John</a>
</div>
</li>
</div>

Answer 2

There's a couple things going on that probably need some attention.
First, a <div> element is not technically "legal" as a direct child of a ul element. The only direct child of a ul should be a li. To solve this, I've moved your dropdown divs inside the li.
Second, you may be suffering a bit of "div-itis". You probably (definitely?) don't need so many div elements to accomplish what you want. I've proposed alternate markup below your markup below.
Third, it's all about position: when you set position: absolute, the position (top, right, bottom, left) are relative to the nearest parent with position: relative. Therefore, you probably want to be sure your li elements have position: relative.
Your original markup, with the divs enclosed in the li
<header>
<h1>Father Bart Gage</h1>
<ul>
<li><a id="about" href="#">ABOUT</a></li>
<li>CONTACT</li>
<li>
<div class="dropdownwrapper">
<div class="dropdown">
<div class="dropbtn" onClick=”return true”>SCRIPTURE</div>
<div class="dropdown-content">
<a id="mark" href="#">Mark</a>
<a id="matthew" href="#">Matthew</a>
<a id="luke" href="#">Luke</a>
<a id="john" href="#">John</a>
</div>
</div>
</div>
</li>
</ul>
</header>
Alternate proposed markup
(note that this also requires altered styles - see the fiddle for those!)
<header>
<h1>Father Bart Gage</h1>
<ul>
<li><a id="about" href="#">ABOUT</a></li>
<li>CONTACT
<!-- nested ul for the dropdown, rather than divs -->
<li>
<div class="dropbtn" onClick=”return true”>SCRIPTURE</div>
<ul class="dropdown dropdown-content">
<li><a id="mark" href="#">Mark</a></li>
<li><a id="matthew" href="#">Matthew</a></li>
<li><a id="luke" href="#">Luke</a></li>
<li><a id="john" href="#">John</a></li>
</ul>
</li>
</ul>
</header>
Working Fiddle using the alternate proposed markup.