Question

I am working on making some drop-down menus. Our designer prescribed a gap between the mega menu and the rollover item. Normally, no problem at all. I just dropped a transparent div tag there in the middle, and we’re good to go, right? Nope. Well, everything (FireFox, Chrome) BUT IE works. The problem is the image that is below the gap between the menus. If I remove the image or turn the extension div white, all is well. But I would like to have the best of both worlds. Is this possible? Is there more information that you need to be of assistance?

Thanks,

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

Could you maybe give the spacer-div a transparent gif/png as background? Then there might be something for IE to “hit”. Just at thought though