HTML + CSS drop down menu

Question

Trying to practice making a slide down menu with html and css.

My only issue is with how the list items overlaps with the menu option.

How do i get the menu to slide behind the menu option?

HTML

<div class="container">
  <p>Text</p>
  <div class="menu">
    <ul>
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
    </ul>
  </div>
</div>

CSS

.container {
  width: 30px;
  height: 20px;
  background-color: red;
}

ul {
  list-style-type: none;
  padding: 0;
}

.menu { 
  height: 0;
  visibility: hidden;
  top: -50px;
  position: absolute;
  transition: all .5s ease;
}

.container:hover .menu {
  visibility: visible;
  top: 20px;
}

.container .menu ul li {
  border: 1px solid black;
  width: 50px;
}

Thanks in advance!

Answer 1

Try Z Index. Give z-index:1 to menu and z-index:-1 to ul

[Link][1]


  [1]: https://jsfiddle.net/Le8jv91j/

Answer 2

As already mentioned, use a z-index of -1. Codepen

.menu { 
    height: 0;
    visibility: hidden;
    top: -50px;
    position: absolute;
    transition: all .5s ease;
    z-index: -1;
}