При наведении курсора IE CSS теряет фокус

Question

Я работаю над выпадающими меню. Наш дизайнер прописал разрыв между мегаменю и пунктом прокрутки. Обычно проблем нет вообще. Я просто поместил прозрачный тег div в середину, и мы готовы идти, верно? Нету. Ну все (FireFox, Chrome) НО IE работает. Проблема в том, что изображение находится ниже разрыва между меню. Если я уберу изображение или поверну расширение div белым, все будет хорошо. Но я хотел бы иметь лучшее из обоих миров. Это возможно? Есть ли еще какая-то информация, которая вам нужна, чтобы помочь?

Спасибо

JMax

HTML:

<ul id="navMenu">
        <li class="navItem">
            <a href="#main" class="trigger">Apparel</a>
            <div class="sub-level" id="menu-main">
                <ul class="categories column1">
                    <li><span>Jacket</span>
                        <ul class="categories column2">
                            <li data:rel="loadContent.html"><span>Male</span></li>
                            <li><span>Female</span></li>
                        </ul>
                    </li>
                    <li><span>Shirt</span>
                        <ul class="categories column2">
                            <li>Male</li>
                            <li>Female</li>
                        </ul>
                    </li>
                    <li>Officer</li>
                    <li data:rel="load-file.htm">Item 1</li>                
                </ul>

            </div>
        </li>

CSS

    #navigation { left:0px; top:25px; position:relative; width:100%; margin: 0 auto; }
    #navMenu { left:0px; list-style:none outside none; text-align:justify;  }
    .navItem { /*float: left;*/ position:relative; margin-right:5px; width:inherit; display:inline-block; *display:inline;  }
    .trigger { padding:2px 0; font-weight:bold; text-decoration:none;  color:#adadad; }
    .trigger:hover, .trigger.hover { color:#332d53; border-bottom:solid 1px #f5d371;}
    .stretch {width: 100%; display: inline-block; *display: inline; zoom: 1; font-size: 0; line-height: 0; }
    #navMenu:first-child .trigger { margin-left:0px; }


    .sub-level { border:1px solid #CCC; width:775px; background-color:#FFFFFF; position:fixed; display:none; height:190px; margin-top:25px; margin-left:-35px; z-index:1001;}
    .extension { width:775px; position:fixed; height:30px; display:none; z-index:1000; /*background-color:#FFF; */}
    .categories { list-style:none outside none; padding-left:0px; height:160px;  font-weight:bold; font-size:10px; color:#adadad; top:0px; margin-top:10px; margin-bottom:20px; border-right: solid #DDDDDD 2px;  }
    .categories li { padding:5px; text-transform: uppercase; padding-left:20px;}
    .categories li:hover { /*background-color:#f5d371;*/ color:#332d53; }

Answer 1

У меня была точно такая же проблема сегодня, в случае, когда у вас есть ul> li> a, у ul или anchor должен быть фон (достаточно цвета), чтобы IE8- не терял фокус при наведении основного изображения (это дает хрень по z-индексам). Если фон установлен только на якорях, между ними не должно быть зазора. У меня был фон на листе, и я понятия не имел, что не так ... проклинал меня над IE какое-то время ...

Answer 2

Не могли бы вы дать spacer-div прозрачный gif / png в качестве фона?Тогда может быть что-то для IE "ударить".Только при мысли, хотя