Dropdown menu behind the page contents

Question

Good afternoon!

I got a dropdown menu (like "Hover") ready on the internet. But the submenu is appearing behind the page content and displays a scroll bar vertically.

Someone’s been through the same trouble?

Follow my html code:

<div class="menu">
    <ul class="menu-list">
        <li><a href="#">Link</a></li>
        <li>
            <a href="#">Link</a>
            <ul class="sub-menu">
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div> 

CSS:

body {
   background-color: rgb(220, 220, 220);
   overflow-x: hidden;  
}

html {
    overflow-x: hidden;
}

.logo-araguaina { 
   float: left;
   height: 80px;
}

.titulo-cabecalho {
   float: left;
   margin-left: 18%;
   margin-top: 2%;
}

.nome-usuario {
    position: relative;
    left: 20%;
    top: 40px;
}

.link-logout {
    position: relative;
    left: 30%;
    top: 25px;
}

.alerta-erro {
    position: absolute;
    font-size: 20px;
    color: red;
    margin-left: 41.5%;
    margin-top: 10%;
}

.alerta-sucesso {
    position: absolute;
    margin-left: 39.5%;
    font-size: 20px;
    color: green;
    margin-top: 10%;
}

.cabecalho {
    overflow-y: hidden;
    overflow-x: hidden;
}



/* Reset CSS */
*, *:after, *:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
}
/* Fundo do menu */
.menu{
  background: #000;
}
/* Remove as bolinhas do lado das listas */
.menu .menu-list, .menu .sub-menu{
  list-style: none;
}
/* Configura todos os links do nosso menu */
.menu a{
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing:0.2em;
}
/* Faz os <li>s ficarem na horizontal */
.menu > .menu-list > li{
  float: left;
  position: relative;
}
/* Configura os links do menu principal */
.menu > .menu-list > li > a {
  padding: 20px;
  margin: 0 5px;
  background: #000;
}
/* Configura o fundo do menu principal quando com mouse hover */
.menu > .menu-list > li:hover a {
  background: #444;
}
/* Mostra o submenu no evento de mouse hover */
.menu > .menu-list > li:hover > .sub-menu {
  display: block;
}
/* Configura o estilo do submenu */
.menu > .menu-list > li > .sub-menu {
  position: absolute;
  top: 50px;
  left: 5px;
  background: blue;
  min-width: 200px;
  z-index: 1000;
  display: none;
}
/* Configura os links do submenu */
.menu > .menu-list > li > .sub-menu > li > a {
 padding: 10px 20px;
}
/* Clearfix para o menu */
.menu:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

Answer 1

The problem is only in:

html {
    overflow-x: hidden;
}

This code is restricting the page height only to its content (note a small vertical scroll bar to the left of the menu bar), that is, as the submenu is an element absolute, will stay behind the area that is not part of the page content.

Solution: remove the above code that is totally unnecessary and the submenu will appear normally.

Tip: remove the overflow-x: hidden; of body because it’s unnecessary too.

Answer 2

I ran it through my local machine (with the shampoo) and it was all right, look at that: https://i.imgur.com/vtLhkTg.png

Make sure your browser is up to date, if you continue try to add to the css of the elements that are appearing behind the z-index property and arrow a numerical value for it, for example:

.menu{
   z-index: 10;
}

If it still appears behind another element, increase the set value.