Liens cliquables sur toute la surface d'une li avec flex

<ul class="menu">
            <li class="item-menu"><a href="#">Test 1</a></li>
            <li class="item-menu"><a href="#">Test 2</a></li>
            <li class="item-menu"><a href="#">Test 3</a></li>
            <li class="item-menu"><a href="#">Test 4</a></li>
            <li class="item-menu"><a href="#">Test 5</a></li>
        </ul>

.menu{
    display: flex;
    justify-content: space-around;
    background: #ddd;
}
.menu li{
    padding: 10px 30px 10px 30px;
    border-right:1px solid #acacac;
}
.menu li:hover{
    background: #acacac;
    cursor: pointer;
}
.menu li:first-child{
    border-left:1px solid #acacac;
}
.item-menu{
    flex: 1 0 0;/*Les li prennent toute la largeur*/
    text-align: center;
}
.item-menu>a{
    padding: 10px 30px 10px 30px;
    color:red;
}
.item-menu>a:hover{
    color:#fff;
}