Выпадающая многоуровневая проблема с зависанием в IE, Firefox - PullRequest
Новая
       28

Выпадающая многоуровневая проблема с зависанием в IE, Firefox

0 голосов
/ 28 марта 2012

Я использовал superfish для dropmenu, но у меня возникают проблемы при рендеринге в IE 8,9 и Firefox. Он отлично работает на Safari и Chrome. При наведении указателя мыши на текст привязки перемещается вверх, я потратил на него часы, модифицируяcss безуспешно, может ли кто-нибудь помочь мне, где я ошибаюсь, ниже приведен веб-сайт:

test-website Эффект парения можно найти в подсписке продуктов. 

.sf-menu li a
{
    float: none;
    border: none;
    margin: 0;
    display: inline-block;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 11px;    

    height: 23px;

    font-weight: bold;

}

.sf-menu li a:hover
{
    display: inline-block;
    height: 0px !Important;
    text-decoration: none;
    font-weight: bold;
    line-height: 20px;
    padding: 0px 0px 0px 20px ;
    float: left;


}

С уважением

Ответы [ 2 ]

0 голосов
/ 28 марта 2012

В вашем подменю нет точки отсчета, откуда можно выпасть, и вы указываете контейнер подменю как абсолютный, так и само подменю ul, я удивлен, что это вообще работает в Chrome, попробуйте это исправить: 

.quiklinks li {
    position:relative;
}

Под вашей jquery.superfishmenu.css таблицей стилей исправьте следующее:

Удалить правило position:absolute для следующего класса: 

.categoriesHeaderMenu {
    position:absolute; /* remove */
}

Установите в подменю ul class следующее: 

.categoriesHeaderMenu ul {
    position:absolute; /* currently it is set as relative, change it to absolute */
    left:0;
}

Кроме того, не знаю, заметили ли вы это, но вы включаете свою таблицу стилей jquery.superfishmenu.css и сценарий js для вашего меню в подменю, которое должно быть в верхней части окна. заголовок.

0 голосов
/ 28 марта 2012

Изменить line-height: 20px; на line-height: 24px;

.sf-menu li a:hover {
    display: inline-block;
    float: left;
    font-weight: bold;
    height: 0 !important;
    line-height: 24px;
    padding: 0 0 0 20px;
    text-decoration: none;
}

EDIT. Таргетинг на вложенные li

.sf-menu ul li ul li a:hover {
       padding: 0 0 0 20px;
       line-height: 20px;
}

Возможно, вам придется поиграть с этими значениями.

...