Добрый вечер!Столкнулся с проблемой работы меню на Iphone.Имеется сайт island-chang.ru, на ноуте и во всех браузерах все работает корректно, более-менее.На Iphone же при нажатие на пункт меню в который вложен подпункты, ничего не происходит.Я как понимаю вся причина в атрибуте
:hover, который на тачевых экранах ведет себя эдаким способом, но вот как это исправить никак не понимаю.Подскажите пожалуйста.
Вот кусочек кода, не судите строго
, я в процессе изучения)
.top_menu {
background: #009B97 url(../images/menu_back_1000.jpg) no-repeat;
width: 1000px;
padding: 10px 0 0;
float:left;
line-height: 1.4em;
}
.top_menu .rawmod {
padding: 0 9px;
}
.top_menu ul.menu
{
display: table-row;
height: 39px;
}
.top_menu ul.menu li
{
width: auto;
display: table-cell;
text-align: center;
height: 38px;
padding-left: 6px;
padding-top: 5px;
letter-spacing: 1px;
}
.top_menu ul.menu li a{
background: #FFF;
width: 1000px;
height: 38px;
display: table-cell;
vertical-align: middle;
color: #056F6C;
text-decoration: none;
font-size: 18px;
padding-top: 2px;
text-transform: uppercase;
}
.top_menu ul.menu li:first-child
{
padding-left: 0;
}
.top_menu ul.menu_mid li a:hover
{
background: #8EACBD;
color: #FFF;
}
.top_menu ul.menu li a:hover{
background: #8EACBD;
color: #FFF;
}
.top_menu ul.menu li.active a,
.top_menu ul.menu_mid li.active a {
background: #FFED00;
color: #FFF;
}
.top_menu .rawmod_sub {
padding: 0 100px;
}
.top_menu ul.menu_mid {
display: table-row;
height: 39px;
}
.top_menu ul.menu_mid li {
width: auto;
display: table-cell;
text-align: center;
height: 38px;
padding-left: 4px;
letter-spacing: 1px;
}
.top_menu ul.menu_mid li:first-child {
padding-left: 0;
}
.top_menu ul.menu_mid li a {
background: #FFF;
width: 1000px;
height: 38px;
display: table-cell;
vertical-align: middle;
color: #056F6C;
text-decoration: none;
font-size: 18px;
text-transform: uppercase;
}
.rawmod_mid {
margin-top: 5px;
}
.rawmod_mid_mid {
width: 742px;
float: left;
}
.top_menu hr {
margin-top: 16px;
}
.menu_mid li:hover ul li a{
color:#FFF;
height:40px;
}
.menu li:hover ul li a
{
padding-left: 0;
color:#FFF;
height:38px;
}
.menu li:hover ul li a:hover {
color:#272533;
background:#8EACBD!important;
}
ul.menu_mid li:hover ul li a:hover{
color:#272533;
background:#8EACBD!important;
}
ul.menu ul li {
float: left;
}
ul.menu_mid ul li a{
background: #445C67 !important;
}
ul.menu ul li a {
background: #445C67 !important;
}
.menu ul ,
.menu_mid ul {
display:none;
position: absolute;
padding:0;
z-index:000;
width: 500px;
}
ul.menu li:hover ul {
display:block;
}
ul.menu_mid li:hover ul {
padding-top:5px;
display:block;
width: 500px;
}
ul.menu li.item-491,
ul.menu li.item-492,
ul.menu li.item-493,
ul.menu li.item-494,
ul.menu li.item-495,
ul.menu li.item-496,
ul.menu li.item-497 {
position:absolute;
}
ul.menu li.item-491{
margin-left:120px;
width: 248px;
}ul.menu li.item-492{
margin-left:365px;
width: 260px;}
ul.menu li.item-493{
margin-left:629px;
width: 227px;}
ul.menu li.item-494{
margin-left: -6px;
margin-top: 43px;
width: 249px;}
ul.menu li.item-495{
margin-top: 43px;
margin-left:247px;
width: 263px;}
ul.menu li.item-496{
margin-left: 515px;
margin-top: 43px;
width: 213px;}
ul.menu li.item-497{
margin-top:43px ;
margin-left:732px;
width: 244px;}
29.12.2021, 23:15:38