no se porque cuando uso la seudoclase :hover pongo en un menú que cuando se pase por encima el ratón tenga border de color negro pero al comenzar la transición comienza de color blanco.
Este es el código:
.nav-main a {
color: white;
text-decoration: none;
padding: 15px !important;
transition-property: border-bottom !important;
transition-duration: 3s !important;
}
.nav-main a:hover {
color: whitesmoke;
border-bottom: 2px solid black !important;
}
.nav-main {
font-size: 17px;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
padding: 40px !important;
width: 100%;
background: #4C4C6D;
}
.nav-main ul {
padding: 50px !important;
}
ul {
list-style: none;
}
<div class="container">
<nav class="nav-main">
<ul>
<li><a href="#">Get Started</a></li>
</ul>
<ul>
<li><a href="#">About Us</a></li>
</ul>
<ul>
<li><a href="#">Log In</a></li>
</ul>
<ul>
<li><a href="#">Sign UP</a></li>
</ul>
</nav>
</div>
Comienza con un color blanco pero luego cambia a negro y lo que quiero es que no aparezca el color blanco.
La cosa es que quiero que comience con el color que elegí que en este caso es negro y no blanco.
Si me pueden ayudar lo agradezco.