I'm struggling to implement a sliding underline effect for my top navigation bar on hover. I've tried using transitions and keyframes, but so far it's not working as expected.
My current attempt only triggers the effect on the parent element, and the underline translates in an undesired manner (500px to the right).
Any guidance or assistance would be greatly appreciated!
#header {
position: fixed;
background-color: rgba(255, 255, 255, 0.7);
width: 100%;
top: 0px;
left: 0px;
z-index: 1;
text-align: center;
padding: 15px;
}
.nav ul li {
font-family: 'Exo', sans-serif;
text-transform: uppercase;
list-style-type: none;
display: inline;
padding: 11px;
}
.slider {
position: absolute;
bottom: 0px;
left: -50px;
width: 50px;
height: 5px;
background-color: rgba(52, 152, 219, 0.3);
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.nav:hover .slider {
transform: translate(500px);
}
.nav ul li a {
text-decoration: none;
margin: 0px 30px 0px 30px;
color: rgba(0, 0, 0, 0.5);<header id="header">
<nav class="nav">
<ul class="list">
<div class="slider"></div>
<li class="btn"><a href="#home">Home</a></li>
<li class="btn"><a href="#about">About</a></li>
<li class="btn"><a href="#portfolio">Portfolio</a></li>
<li class="btn"><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>