Навигацинное меню на мобильных устройствах. Андроид

Всем привет, ребята. Много раз мне помогали по мелочам, но в этот раз проблема по серьезнее, ну по крей мере для меня
Дело в том, что я захотел сделать свой сайт супер - инновационным, по моим меркам, и написал код со скрывающим меню. То есть наводишь на область и вдвигаются ячейки со определёнными разделами (Скрин 1). Ну ок, сделал, круто, мне понрваилось, НО на мобильных устройствах выделяется не один раздел, как на ПК, а все ТРИ. То есть вы понимаете весь ужас, юзер клацает на область в меню и ничего не происходит.
Кто всречался с данном проблемой, прошу вашего совета, заранее спасибо))
Ресурс - aohobase.tk
Скрин 2 - Часть кода, HTML
Часть кода CSS:

h1 {
margin: 5px 0 15px 0;
}
.wrapper {
background: #F7D358;
width: 700px;
padding: 5px 20px 15px;
margin: 0 auto;
box-shadow: 0 0 20px #ccc;
}

ul {
display: block;
margin: 0 30%;
padding: 0;
list-style: none;
}
ul:after {
display: block;
content: ' ';
clear: both;
float: none;
}
ul.menu > li {
float: left;
position: relative;
}
ul.menu > li > a {
display: block;
padding: 10px;
color: #DF3A01;
background-color: #DBA901;
text-decoration: none;
}
ul.menu > li > a:hover {
background-color: white;
}
ul.submenu {
display: none;
position: absolute;
width: 120px;
top: 37px;
left: 0;
background-color: white;
border: 2px solid red;
}
ul.submenu > li {
display: block;
}
ul.submenu > li > a {
display: block;
padding: 10px;
color: #DF3A01;
background-color: #FAAC58;
text-decoration: none;
}
ul.submenu > li > a:hover {
text-decoration: none;
background-color: white;
}

ul.menu > li:hover > ul.submenu {
display: block;
}

Миниатюры

   

0

на моб версиях вообще убери эти 3 пункта, если экран ниже 480Px создай кнопку, выдели для себя приоритетные элементы меню и пусть они выскакивают при наведении на кнопку

0