html css Position foreground

Question

The "Home" is tag and I want it behind the menu. How can I do it?

The above image shows how the site currently looks like.

Here is my CSS Code used currently in the site:

  ul li {
    float: left;
    width: 19.86%;
    background-color: black;
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    border: 1px solid white;
}

    ul li ul li{
    display: none;
    width:100%;
    z-index:10;
}

    h1 {
    top: 1em;
    position: absolute;
    text-align: center;
    font-size: 65px;
    font-weight: bold;
    z-index:5;
}

Answer 1

Instead z-index:5; use z-index:-1; to h1

and remove z-index:10; from ul li ul li (not needed)

ul li {
float: left;
width: 19.86%;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
border: 1px solid white;
}

ul li ul li{
display: none;
width:100%;
}

h1 {
top: 1px;
left:50px;
position: absolute;
text-align: center;
font-size: 65px;
font-weight: bold;
z-index:-1;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </li>
</ul>
<h1>Home</h1>

Answer 2

Set your h1 z-index: 1. And then set z-index: 2 to first ul with black background. Like:

h1 {
    z-index: 1;
}
ul {
    z-index: 2;
}