My navigation menu currently looks like this:
<nav>
<ul>
<li>
<a href="#">About</a>
<div style="background-color: #c03546;height: 10px;"></div>
</li>
<li>
<a href="#">Companies</a>
<div style="background-color: #f26d5b;height: 10px;"></div>
</li>
<li>
<a href="#">Brands</a>
<div style="background-color: #f6ea8c;height: 10px;"></div>
</li>
</ul>
</nav
I am looking to use only CSS to create a hover effect where the corresponding div for each link appears gradually upon hovering (the divs are initially hidden). However, I am facing issues with adding a transition duration.
Currently, I have managed to make the divs appear on hover but I am struggling to incorporate the transition duration into the effect.
nav {
position: fixed;
background-color: #fafafa;
top: 0;
width: 100%;
border-bottom: 1px solid #cacaca;
}
nav li {
display: inline-block;
padding: 0 1em;
}
nav li a {
color: #939393;
font-weight: 400;
transition-duration: 3s;
}
nav li div{
display: none;
transition-duration: 3s;
}
nav li a:hover +div{
display: block;
}