Здравствуйте, вообщем не могу понять уже в чем проблема, в мобильной версии работает наведение а в ПК ссылки не работают вместе с наведением.
Как быть?
<div class="header_container">
<div class="header">
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<div class="logo">
<p class="logo-text">MY<font color="#cd5b5b">лого</font></p>
</div>
<ul class="main-menus">
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
<li><a href="/"> ГЛАВНАЯ </a></li>
<li><a href="/">КАК НАЧАТЬ?</a></li>
<li><a href="/"><img src="../assets/img/social/vk.svg"></a></li>
<li><a href="/"><img src="../assets/img/social/ds.svg"></a></li>
<li><a href="/">КАБИНЕТ</a></li>
</ul>
</div>
</div>
.header_container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.header_container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.header_container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.header_container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.header_container {
max-width: 1140px;
}
}
.header {
display: flex;
}
.logo {
margin-top: 5px;
}
.logo-text {
font-family: 'TT Norms Bold Italic';
font-size: 33px;
color: white;
margin: 0;
}
.logo-img {
margin-top: 8px;
height: 31px;
}
.slogan {
font-family: 'Myriad Pro Regular';
font-size: 9px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.main-menus {
list-style: none;
display: flex;
margin-top: 23px;
margin-left: 150px;
}
.main-menus li {
margin-left: 55px;
white-space: nowrap;
}
.main-menus a {
color: #bbbbbb;
font-size: 15px;
font-family: 'TT_Norms_Bold';
}
.main-menus li:last-child {
margin-left: 30px;
}
.show-menu-btn,.hide-menu-btn {
transition: 0.4s;
font-size: 30px;
color: #fff;
cursor: pointer;
display: none;
}
.show-menu-btn {
float: right;
margin-top: 15px;
}
.show-menu-btn:hover {
color: #cd5b5b;
text-shadow: 0px 0px 16px #cd5b5b;
}
.hide-menu-btn{
position: absolute;
top: 15px;
right: 25px;
color: #fff;
}
.hide-menu-btn:hover {
color: #cd5b5b;
text-shadow: 0px 0px 16px #cd5b5b;
}
#chk{
display: none;
}
@media screen and (min-width: 1200px) {
.main-menus a:after {
content: '';
display: block;
width: 0;
margin: auto;
margin-top: -48px;
box-shadow: 0 7px 0 0 #cd5b5b, 0px 8px 15px 1px rgba(250, 123, 123);
border-radius: 20%;
transition: .3s;
height: 3px;
}
.main-menus a:hover:after {
width: 100%;
}
}
@media screen and (max-width: 1199px) {
.main-menus a:hover {
color: #cd5b5b;
text-shadow: 0px 0px 16px #cd5b5b;
}
.main-menus {
display: none;
}
.header {
flex-direction: row-reverse;
}
.logo {
float: right;
margin: 5px auto 0 0;
}
.show-menu-btn,.hide-menu-btn {
display: block;
}
#chk:checked ~ .main-menus {
margin: 0;
padding: 0;
background-color: #373737;
width: 100%;
height: 100%;
position: fixed;
left: 0;
padding: 40% 0;
z-index: 333;
display: block;
text-align: center;
}
#chk:checked ~ .main-menus li {
margin: 0;
margin-top: 20px;
}
}
Простой
