On Hover Menu List Items Disalign - html

Question

I am using simple HTML and CSS to create horizontal menu using unordered list.
This is HTML & CSS code:
.nav_bar{
margin-left: 700px;
margin-top: 40px;
position: absolute;
}
.nav_bar ul{
list-style-type: none;
}
.nav_bar ul li{
display: inline-block;
text-align: center;
float: left;
}
.nav_bar ul li a{
text-decoration: none;
padding: 12px;
margin: 8px;
font-size: 20px;
color: #fff;
}
.nav_bar ul li a::after{
content: '';
display: inline-block;
width: 0px;
height: 4px;
background: #ff6600;
transition: width .4s;
}
.nav_bar ul li a:hover::after{
width: 100%;
}
<div class="nav_bar">
<ul>
<li>Services</li>
<li>Solution</li>
<li>Support</li>
<li>Partners</li>
<li>Contacts</li>
</ul>
</div>
I don't know where is the problem and why it is occurring?
Please help me out with good reason..

Answer 1

Ive fixed your code and ive got something like this.
.nav_bar ul li a{
text-decoration: none;
padding: 12px;
margin: 8px;
font-size: 20px;
color: orange;
position: relative;
}
.nav_bar ul li a::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 4px;
background: #ff6600;
transition: width .4s;
width: 0;
}
the problem is your after element is displayed inline-block so it rendered inline with your achor tag. and since your achor tag doesnt have enough width to display the ::after inline, your ::after element wrapped after your anchor tag.
see this: https://jsfiddle.net/pm68Lzmv/

Answer 2

Try this:
Add position:absolute; to :after selector for a tag
Remove margin-left from .nav_bar and add right:0
.nav_bar{
margin-top: 40px;
position: absolute;
right:0;
}
.nav_bar ul{
list-style-type: none;
}
.nav_bar ul li{
display: inline-block;
text-align: center;
float: left;
}
.nav_bar ul li a{
text-decoration: none;
padding: 12px;
margin: 0;
font-size: 20px;
color: #aaa;
display:block;
position:relative;
}
.nav_bar ul li a::after{
content: '';
display: inline-block;
width: 0px;
height: 4px;
background: #ff6600;
transition: width .4s;
position:absolute;
left:50%;
bottom:0;
transform: translateX(-50%);
}
.nav_bar ul li a:hover::after{
width: 100%;
}
<div class="nav_bar">
<ul>
<li>Services</li>
<li>Solution</li>
<li>Support</li>
<li>Partners</li>
<li>Contacts</li>
</ul>
</div>

Answer 3

Remove .nav_bar{ margin-left:0px}
Add .nav_bar ul li a position:relative;
add .nav_bar ul li a:after position:absolute;
.nav_bar ul{
list-style-type: none;
}
.nav_bar ul li{
display: inline-block;
text-align: center;
}
.nav_bar ul li a{
text-decoration: none;
padding: 12px;
margin: 0;
font-size: 20px;
color: #aaa;
display:block;
position:relative;
}
.nav_bar ul li a::after{
content: '';
display: inline-block;
width: 0px;
height: 4px;
background: #ff6600;
transition: width .4s;
position:absolute;
left:50%;
bottom:0;
transform: translateX(-50%);
}
.nav_bar ul li a:hover::after{
width: 100%;
}
<div class="nav_bar">
<ul>
<li>Services</li>
<li>Solution</li>
<li>Support</li>
<li>Partners</li>
<li>Contacts</li>
</ul>
</div>