Ajuda na programação, respostas a perguntas / Css / por que item de altura aumentada entre em contato quando passar o mouse sobre ele? - css, css3

por que item de altura aumentada entre em contato quando passar o mouse sobre ele? - css, css3

por que item de altura aumentada entre em contato quando passar o mouse sobre ele? como consertar isso?

Este é o meu código:

ul {
padding: 0;
}

#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}

#nav > li {
float: left;
}

#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;

}


#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;

}

#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {

color: orange;
}

#nav li:hover > a:after {
content:"25B6";
color: red;
margin-left: 5px;
padding: 0;
}
#nav > li:hover > a:after {
content: "25BE";
color: red;
margin-left: 5px;
padding: 0;
}

 <div id="wrapper">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a>
<ul>
<li><a href="#">Model 1</a></li>
<li><a href="#">Model 2</a></li>
<li><a href="#">Model 3</a></li>
</ul>
</li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Veja esta imagem:

Respostas:

1 para resposta № 1

Quando você flutuar sobre os itens da lista - você está adicionando uma seta à tag âncora por meio do conteúdo gerado.

Thant é o que está causando o aumento de altura.

Para consertar isso - basta definir position:absolute no conteúdo gerado.

ul {
padding: 0;
}

#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}

#nav > li {
float: left;
}

#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;

}


#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;

}

#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {

color: orange;
}

#nav li:hover > a:after {
content:"25B6";
color: red;
margin-left: 5px;
padding: 0;
position:absolute;
}
#nav > li:hover > a:after {
content: "25BE";
color: red;
margin-left: 5px;
padding: 0;
}

<div id="wrapper">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a>
<ul>
<li><a href="#">Model 1</a></li>
<li><a href="#">Model 2</a></li>
<li><a href="#">Model 3</a></li>
</ul>
</li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

0 para resposta № 2

Por causa de

#nav > li:hover > a:after {
content: "25BE";
}

a altura (tamanho da fonte) é alta deste conteúdo.

talvez você deva tentar um background-img.

Ou posicione-o absoluto e a tag relativa.

0 para resposta № 3

É por causa do: depois content atributo (#nav > li:hover > a:after) você está adicionando em hover (o pequeno ícone de seta)

Para evitar isso, aplicar line-height: 0 é uma maneira eficiente de fazer isso.

    #nav > li:hover > a:after {
content: "25BE";
color: red;
margin-left: 5px;
padding: 0;
line-height: 0; //fix
}

Além disso, você tem esse código duas vezes, certifique-se de remover o redundante.

0 para a resposta № 4

É questão de altura de linha simples.

ul {
padding: 0;
}

#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}

#nav > li {
float: left;
}

#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;

}


#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
line-height: 20px;
}

#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {

color: orange;
}

#nav li:hover > a:after {
content:"25B6";
color: red;
margin-left: 5px;
padding: 0;
}
#nav > li:hover > a:after {
content: "25BE";
color: red;
margin-left: 5px;
padding: 0;
}

<div id="wrapper">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a>
<ul>
<li><a href="#">Model 1</a></li>
<li><a href="#">Model 2</a></li>
<li><a href="#">Model 3</a></li>
</ul>
</li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>