Como posicionar a borda onde eu quero?

[aneew 0]

Okay, eu to com um problema que eu não sei resolver.

 

Eu estou fazendo um menu drop-down pro meu site.

E ele está ficando mais ou menos assim:

 

 

PORÉM, eu preciso que ele fique o mais parecido possível disso aqui:

 

 

 

Mas é possível, notar uma diferença na imagem 1. As bordas. Eu preciso que todas as bordas tenham o mesmo tamanho e grossura, apenas na parte de cima e na parte de baixo. Porém toda a vez que eu adiciono

 

"border-bottom-width: 2px;

border-top-width: 2px;"

 

as duas bordas se juntam e forma uma linha muito grossa. Eu queria uma solução, talvez manter a borda de top, somente na primeira parte e não se repetir. Não sei, só sei que preciso de ajuda.

 

 

[L. Henrique 179]

Na verdade essa dúvida é um pouco de falta de atenção e erro matemático.

Se você quer 2px acima e 2px abaixo, é só somar 1 + 1 para obter 2px de borda. Ou seja, você precisa deixar dessa forma:

.menu li a {
   border-bottom: 1px solid #000;
   border-top: 1px solid #000;
}

O seus últimos itens do menu vão ficar com somente um pixel, idem ao superior, então você seleciona eles especificamente através dos métodos nth-child, first-child e/ou last-child. Isso é só uma maneira de você selecionar um filho da classe pai de acordo com seu posicionamento (se é o primeiro elemento, ou segundo, ou terceiro...).

Para os primeiros, faça isso:

.menu li a:first-child {
   border-top-width: 2px;
}

E para os últimos:

.menu li a:last-child {
   border-bottom-width: 2px;
}

[aneew 0]

 

Na verdade essa dúvida é um pouco de falta de atenção e erro matemático.

 

Se você quer 2px acima e 2px abaixo, é só somar 1 + 1 para obter 2px de borda. Ou seja, você precisa deixar dessa forma:

.menu li a {
   border-bottom: 1px solid #000;
   border-top: 1px solid #000;
}

O seus últimos itens do menu vão ficar com somente um pixel, idem ao superior, então você seleciona eles especificamente através dos métodos nth-child, first-child e/ou last-child. Isso é só uma maneira de você selecionar um filho da classe pai de acordo com seu posicionamento (se é o primeiro elemento, ou segundo, ou terceiro...).

 

Para os primeiros, faça isso:

.menu li a:first-child {
   border-top-width: 2px;
}

E para os últimos:

.menu li a:last-child {
   border-bottom-width: 2px;
}

 

Pior que eu tentei isso, e ainda ta dando o mesmo problema. :x

 

Tipo, as linhas da "opção 2" estão muito grossas em cima e em baixo.

E assim com todas as outras opções que estão entre sempre entre a 1° e a ultima opção.

Mas obrigada, vou continuar tentando.

[Professor Kaíque Luan 0]

Cola seu código css do menu aqui para darmos uma olhada.

[L. Henrique 179]

Sem o seu código CSS pra análise fica difícil, mas mesmo assim ainda dá pra tentar ajudar.

 

A linha SOMENTE da opção 2 está ficando maior? Se sim, você também pode usar a propriedade nth-child pra ela.

Ex.:

/* A numeração  aqui deve ser trocada pela numeração onde seu elemento se encontra */
.classe-div-pai li:nth-child(2) {
   border-bottom: 1px solid #000;
}

SE e somente SE você for publicar o código inteiro, agradeço se usar o JSFiddle para isso, já que fica muito confuso ler 3000 mil linhas de código aqui no fórum.

Problemática: Se isso não funcionar, talvez exista alguma propriedade CSS que esteja interferindo na sua nova propriedade.

[aneew 0]

Bom, aqui é basicamente todo o meu codigo:

 

ul {list-style:none;width:350px;float: left; }

ul li {
position:relative; }


ul li a {
display:block;
list-style: none;
background: transparent;
color: #072D18;
font-family: Calibri, serif;
text-decoration: none;
padding: 40px;
border-style: solid;
border-bottom-width: 1px;
border-top-width: 1px;
border-right-width: 0;
border-left-width: 0;}


ul li a:last-child {
border-bottom-width: 2px;
}

ul li a:first-child {
border-top-width: 2px;
}

ul li a:hover {
background: #a3a3a3;
transition-duration: 0.5s; }


ul li ul {
display:none;
position: absolute; }


ul li:hover ul {
display:block;
position:absolute;
left: 306px;
top: 0;
min-width: 100%;
}

mas vou tentar de novo nessa forma, muitooo obrigada.

[aneew 0]

CARA NEM PRECISA DE MAIS NADA, VOCÊ SALVOU A MINHA VIDA. AUSHAUHSAUHSUHAS OBRIGADA, DE VERDADE!