What makes the drop-down menu "insert" into a menu item?

Question

I almost got my popup menu, but I can't get the pop-up content to appear under my head when it clicked. He stepped aside. What causes this? Is this a misspelled 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><a href="index.html">Father Bart Gage</a></h1>
  <ul>
    <li><a id="about" href="#">ABOUT</a></li>
    <li><a href="<!-- mailto:[e-mail] -->">CONTACT</a></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 need to move the item dropdown-contentto 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 are several things that probably require some attention.

-, <div> "" ul. ul li. , div li.

-, "div-itis". , , (?) div, , . .

-, : position: absolute, (, , , ) position: relative. , , , li position: relative.

, li

<header>
  <h1><a href="index.html">Father Bart Gage</a></h1>
  <ul>
    <li><a id="about" href="#">ABOUT</a></li>
    <li><a href="<!-- mailto:[e-mail] -->">CONTACT</a></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>

( , - . !)

<header>
  <h1><a href="index.html">Father Bart Gage</a></h1>
  <ul>
    <li><a id="about" href="#">ABOUT</a></li>
    <li><a href="<!-- mailto:[e-mail] -->">CONTACT</a>
      <!-- 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, .