Ir ao conteúdo
  • Cadastre-se
Gabriel753

Erro em um menu com dropdown

Recommended Posts

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

 

chrome.png

 

Mesmo erro no Edge

 

edge.png

 

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

 

firefox.png

 

 

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;
}




 

Aproveitando o tópico, poderiam me indicar sites bons que ensinam HTML, CSS e JavaScript ?

 

E eu também gostaria de fazer um Slideshow automático, o exemplo do W3C não funcionou.

 

 

Editado por Gabriel753

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×