Почему мое меню Superfish не работает правильно в Firefox?

Question

Я пытаюсь использовать плагин jQuery для расширения раскрывающегося меню на веб-сайте. Однако раскрывающееся меню не открывается, когда курсор наводится на него в браузере Firefox (версия 21.0), как и следовало ожидать. В Chrome и Opera он работает. Помимо плагина Superfish выпадающее меню работает также в Firefox с простым CSS.

При использовании опции cssArrows для Superfish стрелки не отображаются в любом браузере (даже при использовании большего количества дополнений). Я не знаю, связана ли эта проблема с первой.

Вот моя разметка:

<nav> 
    <ul> 
     <li><a href="#">Page 1</a></li> 
     <li> 
      <a href="#">Page 2</a> 
      <ul> 
       <li><a href="#">Page 2.1</a></li> 
       <li><a href="#">Page 2.2</a></li> 
       <li><a href="#">Page 2.3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Page 3</a></li> 
     <li><a href="#">Page 4</a></li> 
     <li><a href="#">Page 5</a></li> 
    </ul> 
</nav> 

А вот мой CSS/SASS:

nav { 
    width: 100%; 
    float: left; 

    ul { 
     display: block; 
     float: left; 
     width: 100%; 

     li { 
      position: relative; 
      display: block; 
      float: left; 

      a { 
       display: block; 
       padding: 14px 14px; 
      } 
      /* drop-down */ 
      ul { 
       display: none; 
       position: absolute; 
       left: 0; 
       top: 100%; 
       padding: 0; 
       border: 1px solid #aaa; 
       border-top-width: 0; 

       li { 
        float: none; 
        a { 
         padding: 8px 3px; 
         border-top: 1px solid #aaa; 
        } 
       } 
      } 

      &:hover, 
      &.sfHover { 
       ul { 
        display: block; 
       } 
      } 
     } 
    } 
} 

Вот мой Superfish вызов:

$('nav').superfish(); 

В Firefox, когда я наведите курсор мыши на li тег, который содержит меню второго уровня, li не получает sfHover класс должен произойти. Вместо этого верхний уровень ul присваивает ему класс sfHover. Затем, когда я нажимаю левую кнопку мыши на этом теге li, он получает тег 'sfHover', и появляется раскрывающееся меню. В Chrome и Opera класс sfHover присваивается правому элементу.

Примеры из сайта плагина Superfish также работают в моем браузере Firefox, но они не помогли мне решить эту проблему. Моя html-разметка для меню почти такая же, как в этих примерах.

Я пытался

• присваивания Z-индексов для различных элементов, но это не помогло (не ожидал). В настоящее время ни одному элементу на странице присвоен z-index.
• назначить ширины на li и a элементах, так как я читал, что он имел , помогал в некоторых проблемных ситуациях.
• используйте таблицы стилей из примеров Superfish, но они не работают лучше.
• скрыть раскрывающееся меню с margin-left: -9999px вместо display: none, но это не помогло.
• использовать все опции при инициализации SUPERFISH
• использования position: relative на a тегов, а не на li тегов

Я также проверили, что мой HTML проверяет.

Может ли кто-нибудь выяснить, в чем проблема? Я бы очень признателен за любые предложения.

Answer 1

я не могу проверить его в Firefox 21, а мой Firefox только обновлен до 22.

Но в 22 он работает, как ожидалось, вот где я тестировал: http://jsbin.com/okafoz/1/edit

Это, вероятно, не -Суперская проблема.

Answer 2

Хорошо, проблема была не в версии jQuery. Кажется, я просто на мгновение подумал, что это сработало.

Я использую Wordpress 3.5.2 в проекте, и это противоречило с суперфишей. У меня нет времени слишком много смотреть на это прямо сейчас, но я так много узнал:

wp-includes/js/admin-bar.min.js использует функцию hoverIntent, если на момент выполнения этот скрипт jQuery уже включен, но hoverIntent не определен, он определяет функцию jQuery.fn.hoverIntent.

hoverIntent Плагин jQuery можно дополнительно использовать с суперфишей. superfish вызывает hoverIntent функцию этого плагина один раз, если он определен. Этот вызов заставил мое раскрывающееся меню не отображаться, так как это вызвало ошибку, когда я навел курсор над элементом списка, содержащим подменю («b.browser не определен» в admin-bar.min.js).

Причина выводил только в Firefox, что я только был вход в этом WordPress сайта в Firefox, а не в других браузерах ...

Но: есть вариант disableHI в Superfish. Если вы установите значение true, суперфиш не будет вызывать hoverIntent. Я думал, что уже пробовал этот вариант, но в любом случае это сработало, конечно.