How to make active button?

Good time of day.

I need to create a horizontal menu with the navigation buttons. Outwardly similar, but the transition is performed only if you click the link. Please help me to understand what is the error
Here is a piece of CSS code. In HTML menu using list

.main-menu ul {
list-style-type: none;
display: table;
width: 100%;
table-layout: fixed;
padding: 0;
margin: 0;
}

.main-menu li {
display: table-cell;
background: #7badea;
text-align: center;
padding: 10px 0px;
border-right: 1px solid #96acc1;
vertical-align: middle;
}

.main-menu li:first-child{
background: #6397c5;
}

.main-menu li:last-child{
border: none;
}

.main-menu li a {
text-decoration:none;
color: #fff;
}

.main-menu li:hover {
color:#fff;
background:#6397c5;
transition-duration: 1s;
}

.main-menu li:first-child:hover{
background: #7badea;
transition-duration: 1s;
color: #6397c5;
}
}
July 9th 19 at 13:41
1 answer
July 9th 19 at 13:43
You probably <a> lies within <if>, it should be the opposite, and wraps up whether, then the whole block is a link.
No. You just need all the styles to move on and. The tag is a very bad practice to put more than the bare text or an image. - Willie.Bruen71 commented on July 9th 19 at 13:46
What kind of superstitions, is sufficient to give a display:block and you can only take a parent. - Timmothy.Thiel commented on July 9th 19 at 13:49
: thank you very much! Your advice helped! - nikita.Stracke commented on July 9th 19 at 13:52

Find more questions by tags CSS