Drop down menu hover effect - html

Question

I have a CSS drop down menu with a hover effect. The a element is not taking up the full width of the li and I want it to use the whole width of the li. Anyone know what I can do to take up the whole width on hover? Codepen link below:
https://codepen.io/darenjm/pen/VWdjWb?editors=1100
<header>
<nav class="clearfix">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Customers
<ul>
<li>Our Markets</li>
<li>Questionaire</li>
</ul>
</li>
<li>Employment
<ul>
<li>Work With Us</li>
<li>Open Positions</li>
<li>Apply</li>
</ul>
</li>
<li>Advantage</li>
<li>About Us
<ul>
<li>Colombian Railways History</li>
<li>Company History</li>
<li>Partners</li>
<li>Strategic Partners</li>
<li>Videos</li>
<li>News</li>
<li>FAQ</li>
</ul>
</li>
<li>Contact</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;
}

Answer 1

position:relative; on the parent li and width:100% on the dropdown ul.
https://codepen.io/anon/pen/pwKRox?editors=1100