I'm working on a CSS drop-down menu that has a hover effect, but I'm facing an issue where the a element within the li is not taking up the full width of the li. I want it to utilize the entire width of the li, especially on hover. Does anyone have a solution for this? You can find the Codepen link below:
https://codepen.io/darenjm/pen/VWdjWb?editors=1100
<header>
<nav class="clearfix">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Customers</a>
<ul>
<li><a href="#">Our Markets</a></li>
<li><a href="#">Questionnaire</a></li>
</ul>
</li>
<li><a href="">Employment</a>
<ul>
<li><a href="#">Work With Us</a></li>
<li><a href="#">Open Positions</a></li>
<li><a href="#">Apply</a></li>
</ul>
</li>
<li><a href="#">Advantage</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Colombian Railways History</a></li>
<li><a href="#">Company History</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Strategic Partners</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">News</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="box">
</div>
body{
margin:0;
padding:0;
}
header{
background:#001d45;
width:100%;
}
nav{
background:#001d45;
width:85%;
margin:0 auto;
font-family: helvetica;
font-size: 80%;
}
nav ul{
display: flex;
justify-content:space-between;
padding:0;
margin:0;
transition:all .3s ease-in-out;
}
nav ul li{
list-style:none;
flex:1 1 0%;
}
nav ul li > ul{
background:#af2922;
flex-direction: column;
}
nav ul li > ul > li:hover a{
background:#cc534d;
}
nav ul li a{
display:inline-block;
color:#fff;
text-decoration:none;
padding:10px 20px;
}
nav ul li:hover > a{
background:#af2922;
}
nav > ul ul{
position:absolute;
visibility:hidden;
opacity:0;
}
nav ul li:hover > ul{
visibility:visible;
opacity:1;
}
nav > ul > li{
float:left;
}
.clearfix:after{
display:block;
content:"";
clear:both;
}
.box{
background:#d1d3d3;
height:100px;
}