Erro em um menu com dropdown

Gabriel753 · 23 de julho de 2016

Sou iniciante em desenvolvimento web, então qualquer dica extra é válida

Pois bem, estou tendo esse erro da imagem abaixo, isso acontece no Chrome e no Edge, no Firefox funciona normalmente.Isso só acontece quando está em scroll down, quando está no topo da página funciona nos 3 navegadores

Erro no Chrome

Mesmo erro no Edge

Mesma posição da tela e sem erro no Firefox

Segue os códigos

<!DOCTYPE html>
<html>

<div id="full-size">
 
<head>

<title>Gabriel</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="styles.css">

</head>
<body>

<header class="container">

   <div class="one"> <a href="index.html">
  <img src="http://www.freeiconspng.com/uploads/game-icon-png-0.png" alt="logo" width="150px" height="145px">
</a> 
   </div>

</header>

<ul class="menu">
  <li class="dropdown">
    <a href="#" class="dropbtn">Lançamentos</a>
    <div class="dropdown-content">
      <a href="#">Playstation 4</a>
      <a href="#">Xbox ONE</a>
      <a href="#">PC</a>
	  <a href="#">Playstation 3</a>
      <a href="#">Xbox 360</a>
    </div>
  <li class="dropdown">
    <a href="#" class="dropbtn">Notícias</a>
    <div class="dropdown-content">
      <a href="#">Playstation 4</a>
      <a href="#">Xbox ONE</a>
      <a href="#">PC</a>
	  <a href="#">Playstation 3</a>
      <a href="#">Xbox 360</a>
    </div>
	<li class="dropdown">
    <a href="#" class="dropbtn">Reviews</a>
    <div class="dropdown-content">
      <a href="#">Playstation 4</a>
      <a href="#">Xbox ONE</a>
      <a href="#">PC</a>
	  <a href="#">Playstation 3</a>
      <a href="#">Xbox 360</a>
    </div>
	<li class="dropdown">
    <a href="#" class="dropbtn">Vídeos</a>
    <div class="dropdown-content">
      <a href="#">Playstation 4</a>
      <a href="#">Xbox ONE</a>
      <a href="#">PC</a>
	  <a href="#">Playstation 3</a>
      <a href="#">Xbox 360</a>
    </div>
	<li class="dropdown">
    <a href="#" class="dropbtn">Jogos</a>
    <div class="dropdown-content">
      <a href="#">Playstation 4</a>
      <a href="#">Xbox ONE</a>
      <a href="#">PC</a>
	  <a href="#">Playstation 3</a>
      <a href="#">Xbox 360</a>
    </div>
  </li>
</ul>


<section>
  <div class="section1">

    <figure class="img1">
      <img src="img_fjords_wide.jpg" alt="slide1" width="100%">
    </figure>

    <figure class="img2">
      <img src="img_mountains_wide.jpg" alt="slide2" width="100%">
    </figure>

    <figure class="img3">
      <img src="img_nature_wide.jpg" alt="slide3" width="100%">
    </figure>

  </div>

</section><p>

<footer>Copyright © Gabriel Souza</footer>

</body>

</div>

</html>

html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%; 
  overflow-x: hidden;
  overflow-y: scroll;
}

header.container {
    padding: 0em;
	height:160px;
	width:100%;
    background-color: #3FC8E4;
}

footer {
    padding: 1em;
	height: 30px;
    background-color: #3FC8E4;
    clear: left;
    text-align: center;
}

.one {
    position: relative;
    top: 3px;
    left: 5px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #3FC8E4;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:99;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #3FC8E4}

.dropdown:hover .dropdown-content {
    display: block; 
}

section {
    overflow: hidden;
}