why Increased Height item Contact when hover on it? - css

Question

why Increased Height item Contact when hover on it? how fix it?
This is My code :
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>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
See This Image :

Answer 1

When you hover over the list items - you're adding an arrow to the anchor tag via generated content.
Thant's what's causing the increase in height.
To fix this - just set position:absolute on the generated content.
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>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>

Answer 2

Because of
#nav > li:hover > a:after {
content: '\25BE';
}
the height (font size) is to high of this content.
maybe you should try a background-img.
Or position it absolute and the a-tag relative.

Answer 3

Its because of the :after content attribute (#nav > li:hover > a:after) you are adding on hover(the small arrow icon)
To avoid this, applying line-height: 0 is an efficient way of doing it.
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
line-height: 0; //fix
}
Also you have this code twice, make sure you remove the redundant one.

Answer 4

It simple line height issue.
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>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>