Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

leonardo WD

[Resolvido] Menu drop down com problema de tamanho!

Por , em Desenvolvimento frontend

Recommended Posts

leonardo WD    0

leonardo WD
Postado

Bom galera estou desenvolvendo um novo site e to criando um menu drop down para o site, porém os subitens do menu não querem ficar na mesma altaura

 

O Subitem 1,2,3 fica pequeno e o subitem 4(o último) fica grande. Se eu altero o height para tentar igualar o último subitem fica maior ainda.

 

Meu código:

 

Código HTML

 

<html>
<head>
<title>Menu Drop Down</title>
<link rel="stylesheet" type:"text/css" href="menu.css" />

</head>

</body>

  <div class="menu">

  <div class="grid1">Home</div>
  <div class="grid2">Produtos e Serviços
  <ul>
  <li>Produto 1</li>
  <li>Produto 2</li>
  <li>Produto 3</li>
  <li>Produto 4</li>
  </ul>
  </div>


  </div>

</body>
</html>

 

Código CSS

 


body{
 background-color: #000;
}
.menu{

  width: 850px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  left: auto;
  margin-top: 10px;
  position: relative;
  background-color: #f9f9f9;
  border: 3px #f10f1a solid;
  font-family: Arial;
  font-size: 14px;
  color: #asb333;
}
.grid1{
  width: 100px;
  height: 40px;
  float: left;
  position: relative;
  border-right: 3px #f10f1a solid;
}
.grid1:hover {
  background-color: #333; 
  color: #fff;
}
.grid1{
 text-align: center;
 line-height: 40px;
}
.grid2{
 width: 180px;
 height: 40px;
 float: left;
 position: relative;
 border-right: 3px #f10f1a solid;
}
.grid2:hover{
 background-color: #333;
 color: #fff;
}
.grid2 ul{
 list-style: none;
}
.grid2 li{
  display: none;
}
.grid2:hover li{
  width: 170px;
  display: block;
  background-color: #f9f9f9;
  color: #333;
  border-left: 3px #f10f1a solid;
  border-right: 3px #f10f1a solid;
  border-bottom: 3px #f10f1a solid;
  margin-top: -11px;
  margin-left: -43px;
  text-align: left;
  padding-left: 10px;
}
.grid2 li:hover{
  background-color: #333;
  color: #fff;
  height: 40px;
}
.grid2{
  text-align: center;
  line-height: 40px;
}

 

Esse ai eu criei separado do menu do site para tentar achar o problema, mas não consegui se você poderem me da uma ajuda, Obrigado, se não Obrigado Também!

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annyh    4

Annyh
Postado

ficou assim devido a margem negativa que você adicionou ao topo da li.

 

veja como eu fiz:

 

.grid2:hover li{
  width: 170px;
  display: block;
  background-color: #f9f9f9;
  color: #333;
  border: 3px #f10f1a solid;
   border-top: 0;
   margin: 0 0 0 -43px; /* antes era -11px 0 0 -43px, o -11px fazia as outras li's subirem */
  text-align: left;
  padding-left: 10px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito