Problem jest taki, że a:first-child/last-child:hover i a:hover nie działa jak powinien. Pierwszy i ostatni element powinien być zaokrąglony na zewnątrz a zaokrąglenie jest na każdym elemencie takie samo..
Jakieś pomysły ?
li {
display: inline-block;
position: relative;
background-color: #8BD700;
width: 20%;
height:30px;
text-align:center;
&:first-child {
border-radius: 20px 0 0 20px;
}
&:last-child{
border-radius: 0 20px 20px 0;
}
a{
text-decoration: none;
height: 100%;
width:100%;
display: block;
&:first-child {
&:hover{
border-radius: 0 20px 20px 0 ;
background-color: #1E4B08;
color:white;
}
}
&:hover{
background-color: #1E4B08;
color:white;
border-radius: 0 0 0 0 !important;
}
&:last-child{
&:hover{
border-radius: 20px 0 0 20px !important;
background-color: #1E4B08;
color:white;
}
}
}