Ir para conteúdo

POWERED BY:

Arquivado

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

rodrock

CSS - DropDown com espaço indesejado

Recommended Posts

Bom dia, gente.

 

Estou tendo um problema com meu dropdown. Ele está criando um espaço indesejado na esquerda do submenu. já procurei na internet e não achei nada que me ajude...

o mais próximo foi aqui no fórum, porém não resolveu.

 

já coloquei float:left; em todas as chaves relacionas ao menu mas de nada adiantou...

 

vou postar aqui meu codigo para vocês verem.

 

vocês pode vem o que está acontecendo aqui tbm www.rodrock.zz.mu/plenoser

 

eu sei que o codigo ta bem zoado... mas releva... to aprendendo... se alguém puder dar algumas dicas, eu aceito

 

 

<nav>
<ul class="menu">
<li><a href="#" title="Link 1">Link 1
<ul id="link1">
<li><a href="#" title="Link 1">Link 1</a></li>
<li><a href="#" title="Link 2">Link 2</a></li>
<li><a href="#" title="Link 3">Link 3</a></li>
</ul>
</a></li>
<li><a href="#" title="Link 2">Link 2</a></li>
<li><a href="#" title="Link 3">Link 3</a></li>
<li><a href="#" title="Link 4">Link 4</a></li>
<li><a href="#" title="Link 5">Link 5</a></li>
<li><a href="#" title="Link 6">Link 6</a></li>
</ul>
</nav>

 

 

 

nav {
background:#d7f6f3;
text-align:center;
}
nav ul {
list-style:none;
}
nav ul li {
display:inline-table;
margin-right:10px;
}
nav ul li a {
display:block;
width:100px;
text-decoration:none;
}
nav ul li a:hover {
background:#eee;
}
.menu li {
position:relative;
}
.menu li ul {
position:absolute;
left: 50%;
display:none;
background:#fff;
list-style:none;
}
.menu li ul li {
display:block;
padding:0;
margin:0;
}
.menu li:hover ul, .menu li.over ul {
display:block;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pronto, agora tá funcionando perfeitamente, tinha um probleminha de reset, e em .menu li ul estava setado o right em 50%

 

nav ul{
  margin: 0; 
  padding: 0; }

.menu {
  background:#d7f6f3;
  text-align:center;  }

.menu li {
  margin-right:10px;
  display:inline-table; }
 
.menu li a {
  display:block;
  width:100px;
  text-decoration:none;  }

.menu li a:hover { background:#eee; }
 
.menu li ul {
  position:absolute;
  display:none;
  background:#fff;  }
 
.menu li ul li {
  padding:0;
  margin:0;
  display:block; }
 
.menu li:hover ul { display:block; }

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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