В данном примере z-index я прописал руками для каждого отдельного li. Но я не знаю сколько будет разделов в меню. Как можно автоматизировать выставление z-index с первого по последний LI ?
.main-navigation-top {
width: 100%;
height: 66px;
}
.main-navigation-top li {
list-style-type: none;
float: left;
margin-left: -26px;
padding-left: 40px;
padding-right: 20px;
line-height: 66px;
border-right: 2px #f0f3f8 solid;
border-bottom: 1px #f0f3f8 solid;
border-radius: 0px 33px 33px 0px;
position: relative;
background-color: #fff;
}
.main-navigation-top li:hover {
background-color: #f0f3f8;
}
.q { z-index: 3;}
.w { z-index: 2;}
.e { z-index: 1;}
<nav class="main-navigation-top">
<ul class="menu">
<li class="menu-item q">Добавить</li>
<li class="menu-item w">Редактировать</li>
<li class="menu-item e">Удалить</li>
</ul>
</nav>