Раскрывающееся меню исчезает в IE7 - PullRequest
Новая
       8

Раскрывающееся меню исчезает в IE7

3 голосов
/ 28 марта 2010

Странная проблема с выпадающим меню в IE7: http://screenr.com/SNM

Раскрывающийся список исчезает, когда мышь перемещается к части, которая находится над другими слоями.

Структура HTML выглядит следующим образом: 

<div class="header">
<ul class="nav>
    <li><a href="">item</a>
    <ul><li><a href="">sub-item</a></li></ul>
    </li>
</ul>
</div><!-- /header-->
<div class="featured"></div>
<div class="content"></div>

Подменю позиционируется абсолютно и имеет visibility:hidden, затем оно устанавливается на visible с помощью jQuery, вот так: 

$(".header ul.nav li").hover(function(){
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
}, function(){
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
});

У меня была проблема с скрывающимся раскрывающимся списком под другим содержимым в IE7, легко исправляемая путем передачи z-index его родителю и другим элементам div: 

*:first-child+html .header {
    position: relative;
    z-index: 2 !important;
}

*:first-child+html .content, 
*:first-child+html .main,
*:first-child+html .primary
*:first-child+html .featured {
    position: relative;
    z-index: 1 !important;
}

Теперь я понятия не имею, почему меню исчезает при наведении на другие элементы div, вы можете посмотреть сайт в прямом эфире здесь: http://dev.gentlecode.net/ama/ubezpieczenia.html

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

Заранее спасибо за любую помощь!

Ответы [ 5 ]

4 голосов
/ 03 сентября 2010

Благодаря глупой удаче, я думаю, что я нашел решение.

Я начал добавлять цвета фона к различным элементам в раскрывающемся меню, чтобы посмотреть, есть ли «дыры», которые могут влиять на состояние :hover.

Когда я добавил background-color:#HEX к ссылкам 2-го уровня в меню, все начало работать в IE7.

Затем я попытался использовать background-color:transparent, но это, к сожалению, не работает.

Наконец-то я попробовал это с прозрачным фоновым изображением, и это работает.

Таким образом, решение заключается в добавлении сплошного фона или прозрачного фонового изображения к ссылкам 2-го уровня в раскрывающемся меню.

0 голосов
/ 10 апреля 2013

У меня была похожая проблема с использованием IE7. Я наконец исправил! Моя проблема была в том, что в IE7 есть проблема с display: block. Так что моя ссылка была не во всех li, а просто на самом тексте внутри li. Я исправил это, поместив ширину в 'a' в css с тем же размером, что и ul. Теперь это работает! Я так счастлив, что я оглядываюсь на каждую страницу, на которую я искал ответ и пытаюсь помочь людям. если кто-то хочет лучше объяснить, просто пришлите мне по электронной почте. humberto@homemdeasas.com

ч!

0 голосов
/ 06 сентября 2010

Я думаю, что он исчезает, потому что у вас установлен запас / пространство. Поэтому, когда ваша мышь наводит на это поле / поле, вы технически не зависаете над ul. Я знаю, это странно, и не совсем имеет смысла, но IE7 такой глупый.

Чтобы это исправить, нужно убрать верхнюю / нижнюю границу. Замените их дополнением.

Это случилось со мной однажды, но я исправил это, убрав все поля и заменив отступы. Не уверен, поможет ли это в этом сценарии.

Удачи.

0 голосов
/ 30 марта 2010

Я не уверен, что ваши селекторы CSS выбирают то, что вы хотели. Если вы не используете какой-либо CSS-хак или что-то, о чем я не знаю, *:first-child+html .content выберет все .content элементы, которые являются потомками элемента html, смежного с :first-child любого другого элемента. Элемент html не должен быть смежным с любыми другими элементами, поэтому я думаю, что объявление z-index: 1 !important; ни к чему не применяется.

0 голосов
/ 29 марта 2010

Я думаю, что проблема в «первичном» div внутри «content» div. Попробуйте установить низкое значение z-index на .content .primary. Честно говоря, абсолютное позиционирование редко является лучшим способом достижения такого макета CSS, и хотя более гибкий макет может иметь свои собственные проблемы, это не будет этими проблемами.

Кроме того, псевдокласс :first-child не очень хорошо работает в IE, так что это может быть реальным источником вашей ошибки.

...