[mole]

Добрый вечер! Столкнулся с проблемой работы меню на Iphone.Имеется сайт остров-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;
	
}

/* MENU_MID */

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

[dik85]

Думаю дело всё в том что ваш шаблон не адоптирован к мобильным устройствам, и для того чтобы это сделать нужно хорошо понимать что и как править. Вот нашел статью которая быть может вам поможет сделать сайт мобильным без особых изменений в файлах _http://joomlablog.ru/prijomy-poleznye-tryuki/67-rukovodstvo-po-nastrojke-mobile-joomla