Seeking assistance to animate border-bottom movement in navbar
Desiring animation effect for hover event on second li item
The code for the navbar is as follows:
.top-bar {
background:#0d0d0d;
width:100%;
height:85px;
position:fixed;
top:0;
z-index:99999;
}
.menu {
float: right;
margin: 16px 50px;
}
.menu li {
float: right;
color: #FFF;
list-style: none;
font-size: 18px;
padding: 15px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
height: 36px;
}
.menu li:hover {color:#8cc152;}
.active {
border-bottom:3px solid #8cc152;
color:#8cc152 !important;
}
.hvr {
position:relative;
}
.hvr:before {
content: '';
width: 5px;
height: 5px;
background: #8cc152;
position: absolute;
margin-top: 48px;
transform: rotate(45deg);
right:50%;
}<div class="top-bar">
<div class="menu">
<a href="#"><li class="active hvr"> Menu </li></a>
<a href="#"><li> Menu </li></a>
<a href="#"><li> Menu </li></a>
<a href="#"><li> Menu </li></a>
</div>
<div class="logo"></div>
</div>No functional demonstration available. Assistance appreciated!