Как сделать активную кнопку?

Question

[anna_bogos]

Доброго времени суток.

Мне необходимо создать горизонтальное меню с кнопками перехода. Внешне похоже, но переход осуществляется только если нажать на ссылку. Помогите, пожалуйста, разобраться в чем ошибка,
Вот кусок кода CSS. В HTML меню сделано с помощью списка

.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;
}
}

Answer 1

[ThunderCat]

У вас вероятно <а> лежит внутри <ли>, должно быть наоборот, а оборачивает ли, тогда весь блок будет ссылкой.

Comments

[bro-dev]

Нет. Нужно просто все стили с ли перенести на а. В тег а очень плохая практика пихать больше чем голый текст или картинка.

[Алексей]

Что за предрасудки, достаточно a дать display:block и можно занимать всего родителя.

[anna_bogos]

Алексей: спасибо большое! Ваш совет помог!