html - 下拉菜单悬停效果

Question

我有一个带有悬停效果的 CSS 下拉菜单。 a 元素没有占据 li 的整个宽度，我希望它使用 li 的整个宽度。任何人都知道我可以做些什么来占据悬停时的整个宽度？代码笔链接如下: 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="#">Questionaire</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;
}

Answer 1

position:relative; 在父 li 上，width:100% 在下拉列表 ul 上。

https://codepen.io/anon/pen/pwKRox?editors=1100