Menu with DropDown behind page content

Navigation
0

Good afternoon!

I took a dropdown menu ("hover") ready on the internet. But the submenu is appearing behind the page content and displays a vertical scrollbar.

Has anyone ever had the same problem?

Here is 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;
}
    
asked by anonymous 05.10.2017 / 19:46

2 answers

2

The problem is ONLY in: 

html {
    overflow-x: hidden;
}

This code is restricting page height only to its contents ( note a small vertical scrollbar to the left of the menu bar ), ie how the submenu is a absolute , will be behind the area that is not part of the page content.

Solution: Remove the above code which is totally unnecessary and the submenu will appear normally.

Tip: remove overflow-x: hidden; from body because it is unnecessary too.

    
05.10.2017 / 20:41
0

I ran on my local machine (with xamp) and it worked fine, see: link

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

.menu{
   z-index: 10;
}

If it still continues to appear behind another element, increase the set value.

    
05.10.2017 / 20:10
How to end an activity from another class? PHP Startup: Unable to load dynamic library '/usr/lib/php/20151012/php_pdo_mysql.dll [closed]