是什么让下拉菜单内容"粘贴"到菜单项？

Question

我几乎让我的下拉菜单工作,但是当点击它时,我无法让下拉内容显示在头部下方.它被移到了一边.是什么原因造成的？是不正确的写作位置？

小提琴: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:chris.gage@gmail.org -->">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

您必须将dropdown-content元素移动到列表项中:

<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>