Основное горизонтальное меню, не работающее на iPad

Question

У меня возникли проблемы с получением простой горизонтальной навигации для работы/приятного просмотра на iPad. Это просто прямое горизонтальное меню, без выпадающих меню, поэтому нет необходимости беспокоиться о a: hover (я знаю, что он не работает на мобильных устройствах).

На сайте есть twitter bootstrap, jQuery и пользовательский интерфейс jQuery. Меню не является основной навигацией, а меню с вкладками, позволяющее людям фильтровать данные в таблице (щелчок по опции приводит к тому, что он ударяет по остаточному вызову для получения новых данных)

На рабочем столе отображается меню бар. На iPad он отображает список UL. Я надеюсь, что это исправлено для стилизации. Причина я не использую вариант Bootstrap потому, что мне нужно в меню, чтобы остаться все это время

CSS

ul.horizontalNav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

ul.horizontalNav li { 
    float: left; 
} 

ul.horizontalNav li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

ul.horizontalNav li a:hover { 
    background-color: #999; 
} 

ul.horizontalNav li.active { 
    background-color:#4CAF50; 
} 

ul.horizontalNav li { 
    border-right: 1px solid #bbb; 
} 

ul.horizontalNav li:last-child { 
    border-right: none; 
} 

ul.horizontalNav li { 
    border-right: 1px solid #bbb; 
} 

ul.horizontalNav li:last-child { 
    border-right: none; 
} 

HTML

<div id="CAFSummaryHeaderBar"> 
    <ul class="horizontalNav" id="CAFSummaryMenu"> 
     <li><a href="#All">All</a></li> 
     <li><a href="#MyRequests">My Requests</a></li> 
     <li><a href="#Draft">Drafts</a></li> 
     <li><a href="#Review">In Admin Review</a></li> 
     <li><a href="#Approval">Getting Approvals</a></li> 
     <li><a href="#FollowUp">Follow Up</a></li> 
     <li><a href="#Archived">Archived</a></li> 
     <li><a href="#Abandoned">Abandoned</a></li> 
    </ul> 
</div> 

Answer 1

Вы пробовали использовать средства массовой информации запросы для вашего css?

например:

@media only screen and (device-width: 768px) { 
    /* For general iPad layouts */ 
} 

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { 
    /* For portrait layouts only */ 
} 

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { 
    /* For landscape layouts only */ 
} 

Затем просто добавить нужные стили в как

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { 
     /* For landscape layouts only */ 
ul.mylist { 
my: style; 
} 

}