CSS Dynamic Navigation with Hover - Как мне заставить его работать в iOS Safari?

На моем сайте я использую только динамическое меню с CSS. Это нормально в настольных браузерах, но не в iOS (iphone, ipad и т. Д.), Потому что сенсорный интерфейс не поддерживает селектор : hover .

Мой вопрос: как лучше всего поддерживать это на iOS? (В идеале это либо исправление с помощью некоторого CSS, либо Javascript, который заставит существующий код работать, а не делать все это просто для поддержки iOS)

Мой HTML выглядит так

 
  
 
     Item 1
     
 
       
sub nav 1.1
       
sub nav 1.2
     
 
  
 
  
 
     Item 2
     
 
       
sub nav 2.1
       
sub nav 2.2
     
 
  
 
  
 
     Item 3 
     
 
        
sub nav 3.1
        
sub nav 3.2
    
 
  
 
 ​​​​​

И CSS это

#nav li {
    float:left;
    padding:0 15px;
}

#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    margin-left: -10px;
}

#nav li:hover ul {
    left: auto;
}

Я сделал jsfiddle здесь: http: // jsfiddle. XML-файл

    jira.webresources:jira-global
    

Я пробовал его также без зависимости

Я попытался поместить #requireResource ("jira.webresources: jira-global") в мой шаблон скорости, и это тоже не работает. Это мой js в моем файле input.vm

. Все, что я, похоже, делаю, приводит только к Uncaught ReferenceError: jQuery не определен

, но не совсем уверен, что делать дальше !