Как сделать так, чтобы элементы появлялись перед текстовыми элементами, но за их фоном?

Question

Я пытаюсь создать веб-страницу, на которой при нажатии на заголовок появляется раскрывающееся меню, но иногда оно совпадает с заголовком (в зависимости от размера экрана). Поэтому я попытался исправить это, присвоив заголовку более высокий z-индекс, но это сделало текст и его фоном go над выпадающим меню. Можно ли сделать так, чтобы над раскрывающимся меню отображался только текст, а , а не его фон?

HTML:

<h3 id="scores">
/* The dropdown menu title (when you click, it creates the menu) */
  Scores▼
 </h3>
<h1>
 /* The title (I want the text only to go higher than the menu */
 HearHymn
</h1>

CSS:

h1 /*The title*/{
 z-index: 3;
 font-size: 40pt;
 border-radius: 10px;
 text-align: center;
 font-family: "Raleway";
 background-color: rgb(127, 178, 94);
 margin: auto;
}

h3 /*The menu title*/{
 position: relative;
 font-family: "Open sans";
 float: left;
 margin-right: -80px;
 margin-left: 10px;
 z-index: 2;
}

.drop-down /*The menu (class name given when generated)*/{
 font-family: "Open sans";
 background-color: rgba(171, 207, 149, .8);;
 padding: 30px;
 border-radius: 15px;
 position: absolute;
 left: 7px;
 top: 9px;
 z-index: 1;
}

JavaScript:

//Creates dropdown menu (as p tag)
var dropDownEl = document.createElement("p");

//Sets text content
dropDownEl.textContent = "Text";

//Appends menu function
var onButtonClick = function() {
 document.body.appendChild(dropDownEl);
};

//Calls append function when clicked
scoresEl.addEventListener("click", onButtonClick);

//Sets class name
dropDownEl.className = "drop-down";