2011-08-09 57 views
-1

我正在制作一些下拉菜单。我们的设计师规定了大型菜单和翻转项目之间的差距。通常,没有问题。我刚刚在中间放了一个透明的div标签,我们很高兴去,对不对?不。那么,一切(火狐,铬),但IE浏览器的作品。问题在于图像低于菜单之间的差距。如果我删除图像或将扩展名div变成白色,一切都很好。但我希望拥有两全其美。这可能吗?是否有更多信息需要您提供帮助?IE浏览器CSS悬停失去了焦点时,图片上

感谢,

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; } 

回答

1

你能不能给可能的间隔-DIV透明GIF/PNG作为背景?然后可能有东西让IE浏览器“打”。虽然

+0

就是这样。谢谢!! –

1

我今天有完全相同的问题,在你有ul> li> a的情况下,ul或anchor必须有背景(颜色足够),所以IE8-在悬停时不会失去焦点一个底层的图像(它给z-index上的垃圾)。如果只在锚上设置背景,则它们之间不能有间隙。我有一个背景,并没有任何线索有什么问题...现在诅咒IE一段时间...

相关问题