Блог

Главная - Вопросы по программированию - Выпадающее меню не работает в Opera

Выпадающее меню не работает в Opera

#jquery #css #opera #drop-down-menu

#jquery #css #opera #выпадающее меню

Вопрос:

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

Кто-нибудь может увидеть что-нибудь, что может быть причиной этого в моем коде?

Спасибо

 $(document).ready(function () { 

$('#nav li').hover(
   function () {
   $('ul', this).slideDown(200);
   }, 
   function () {
   $('ul', this).slideUp(100);         
   }
);

});

CSS

 ul#nav {list-style: none; white-space: nowrap; float: right; position: absolute; bottom: 10px; right: 0;}
ul#nav li {display: inline; margin-right: 10px; padding: 0 10px; position: relative; text-transform: uppercase;}
ul#nav li.last {margin-right: 0;}
ul#nav li.slash {padding: 0;}
ul#nav li a {text-transform: uppercase; font-size: 12px; color: black; padding: 10px 0 10px 10px; margin-bottom: 10px;}
ul#nav li a:hover {text-decoration: underline;}
ul#nav li a.active {font-style: normal; text-decoration: underline;}
ul#nav li a.active:hover {color: black;}
ul#nav li.parent_selected, ul#nav li.selected {font-style: italic;}

#nav li ul {position: absolute; top: 26px; right: 0; padding: 20px 0 10px 20px; background-color: #f6f6f6; border: 1px solid #ccc; text-align: right; z-index: 999;}
#nav li ul li {display:block; margin-bottom: 10px; padding: 0;}
#nav li ul li a {text-transform: none; font-size: 12px; color: black;}
#nav li ul li a:hover {text-decoration: underline;}

Похоже, что это работает во всех основных браузерах (кроме Opera) Я не решаюсь возиться с ним, пока не пойму, что происходит не так.

Спасибо

Комментарии:

1. Можете ли вы воспроизвести проблему в JS Fiddle , чтобы мы могли видеть проблему, а не пытаться вывести ее из вашего jQuery и CSS?

2. Спасибо, Дэвид, вот оно jsfiddle.net/WctpW

3. Странно, что fiddle, похоже, работает в Opera!

Ответ №1:

Я был там раньше (и часто): Opera (что в любом случае правильно) ожидает, что все будет понятно. Хотя я могу обойтись без отсутствующих элементов практически в любом другом браузере, если я, например, не выполню «очистить оба» или «отобразить блок» в одном элементе, в Opera все рассинхронизируется.

Проверьте каждый элемент на наличие с, высоты, плавающего и т.д.

PS: Я даже не смотрел на ваш код.