IE7: Can't display popup box when hovering over transparent background

Question

This is probably one of the weirdest things I've seen... I have a list of elements and each contains an icon image and a hidden pop-up box. When the user hovers over the icon, the popup box is display above (jQuery's hover). This works fine in all browsers and IE8/9, but IE7 has an issue. There's a 'gap' between the icon and the popup box. If I set a background color and the popup box's container is touching the row of icons, I can keep the popup box displayed on the screen as the user moves their mouse through it to make a selection.

However, I don't want a background color displayed, and when it's not, the popup box will disappear when the user moves their mouse anywhere in that gap. In other words, the popup displays in the correct position, but the user can't make a selection because there's no way to get to the popup without hovering over the gap.

Here's some HTML and CSS:

<div class="icon-nav">
   <ul>
      <li>
        <div class="popup-wrapper">
            <a href="#" class="replace air" rel="air">Air Quality</a>
            <div class="popup-container">
                <div class="popup-content"></div>
            </div>
        </div>
      </li>
      <li>
         <div class="popup-wrapper">
            <a href="#" class="replace health" rel="health">Public Health</a>
            <div class="popup-container">
                <div class="popup-content"></div>
            </div>
        </div>
      </li>
      Etc....
   </ul>
</div>

CSS:

.icon-nav { position: absolute; top: 388px; z-index: 999; width: 100%; } /* Positioned relative to a wrapper element. */
.icon-nav ul { display: block; width: 968px; margin: 0 auto; position: relative; }
.icon-nav ul li { float: left;  }
.icon-nav ul li .popup-wrapper {}
.icon-nav ul li .popup-container { position: absolute; bottom: 0px; padding-bottom: 35px; z-index: 9999; width: 100%; display:none; left: 0px; }
.icon-nav ul li .popup-content { width: 900px; height: 260px; background-color: #fff; margin: 0 auto; padding:30px; }
.icon-nav ul li a { width:121px; height: 115px; overflow: hidden; }

jQuery:

$('.icon-nav li .popup-wrapper').hover(
      function(){
         $('a',this).addClass('hover')
         var name = $('a', this).attr('rel');
         var popup = $('.popup-container', this);
         $(popup).css({'display':'block'});
         // More Code...
      },function(){
        $('a',this).removeClass('hover');
        $('.popup-container', this).css({'display':'none'});
      }
   );

TIA!!!

Answer 1

创建一个1像素的正方形透明png，并将其用作元素背景。

Answer 2

Just a quick something to try:

Set the css rule background-color: transparent

on the div that contains the gap (I guess that'd be .popup-container).