CSS菜单悬停的IE6问题

这个基本菜单在所有现代浏览器中都能很好地工作，但在IE6中不会弹球。CSS菜单悬停的IE6问题

而我的HTML/CSS代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

    <head> 

    <title>CSS Test</title> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <style type="text/css"> 
     * {margin:0;padding:0} 

     /* Mega Menu */ 
     #mega { 
      list-style:none; 
     } 

     #mega li { 
      float:left; 
      position:relative; 
     } 

     #mega li:hover { 
      border-bottom:0; 
      margin-top:-7px; 
      z-index:1; 
      padding:7px 0 1px; 
      cursor:pointer 
     } 

     #mega a:hover{ 
      cursor:pointer 
     } 

     #mega a { 
      color:#000; 
      outline:0; 
      text-decoration:none; 
      display:block; 
      line-height:2em; 
     } 

     #mega div { 
      position:absolute; 
      left:-999em; 
      margin-top:58px; 
      margin-left:1px; 
      width:350px; 
      border-top:0; 
      font-weight:400; 
      text-align:left; 
      background:#00B8F1; 
      padding:0 10px 10px; 
     } 

     #mega li:hover div { 
      left:-1px; 
      top:auto; 
     } 

     #mega li.dif:hover div { 
      left:-221px; 
     } 

     #mega div p { 
      float:left; 
      width:106px; 
      padding-left:10px; 
      position:relative; 
     } 

     #mega div p a { 
      text-decoration:underline; 
      float:left; 
      clear:left; 
      width:100%; 
      line-height:1.4; 
     } 

     #mega div a:hover,#mega div a:focus,#mega div a:active { 
      text-decoration:none; 
     } 

     #mega div .s1,#mega div .s2,#mega div .s3 { 
      position:absolute; 
      width:100%; 
      height:100%; 
     } 

     #mega div .s1 { 
      background:url(images/rightcorner.png) 100% 0 no-repeat; 
      top:1px; 
      right:-9px; 
     } 

     #mega div .s2 { 
      background:url(images/leftcorner.png) 0 100% no-repeat; 
      bottom:-9px; 
      left:1px; 
     } 

     #mega div .s3 { 
      background:url(images/shadow.png) 100% 100%; 
      top:9px; 
      right:-9px; 
     } 

     #mega li:hover .s4 { 
      background:url(images/li-shadow.png) 100% 0 repeat-y; 
      position:absolute; 
      top:0; 
      right:-9px; 
      height:100%; 
      padding:0 8px 0 0; 
     } 

     * html #mega li:hover .s4 { 
      background:none; 
     } 

     #mega li:hover .dif-s4 { 
      padding-bottom:9px; 
     } 

     ul#mega li .sub { 
      top:58px; 
      left:0; 
      position:absolute; 
      float:left; 
      width:440px!important; 
      display:none; 
      padding:20px; 
     } 

     li#di div { 
      background-position:100px 0; 
     } 

     #mega li a#delivery-info { 
      width:102px; 
      height:59px; 
      position:relative; 
     } 

     #mega li a#delivery-info span { 
      position:absolute; 
      width:100%; 
      height:100%; 
     } 

     #mega li:hover a#delivery-info span { 
      position:absolute; 
      width:100%; 
      height:100%; 
     } 

     ul#topnav,ul#mega { 
      float:left; 
      width:100%; 
      list-style:none; 
      font-size:1.1em; 
     } 

     ul#topnav li,ul#mega li { 
      float:left; 
      position:relative; 
      z-index:1; 
      margin:0; 
      padding:0; 
     } 

     ul#topnav li a,ul#mega li a { 
      float:left; 
      line-height:1.6em; 
     } 

     ul#topnav li:hover a,ul#topnav li a:hover,ul#mega li:hover a,ul#mega li a:hover { 
      background-position:left bottom; 
     } 

     ul#topnav li .row,ul#mega li .row { 
      clear:both; 
      float:left; 
      width:100%; 
      margin-bottom:10px; 
     } 

     ul#topnav li .sub ul,ul#mega li .sub ul { 
      list-style:none; 
      width:150px; 
      float:left; 
      margin:0; 
      padding:0; 
     } 

     ul#topnav .sub ul li,ul#mega .sub ul li { 
      width:100%; 
      color:#fff; 
     } 
    </style> 


    </head> 

    <body> 

    <div id="bar" style="height:60px">&nbsp;</div> 

     <div id="container"> 

      <div id="middle"> 

       <div id="nav"> 

        <ul id="mega"> 
         <li id="di"><a href="/" id="delivery-info" class="delivery-info" title="Delivery Info"><span></span>Delivery Info</a> 
         <b class="s4"></b> 
          <div> <b class="s1"></b><b class="s2"></b><b class="s3"></b><br /><br /> 
          <p><a href="#">Lots of links go here</a></p> 
          <p><a href="#">Lots of links go here</a></p> 
          <p><a href="#">Lots of links go here</a></p> 
          <p><a href="#">Lots of links go here</a></p> 
          <p><a href="#">Lots of links go here</a></p> 
          </div> 
         </li> 
        </ul> 

       </div> 

      </div> 

     </div> 

    </body> 

</html>

有人能指出我在正确的方向？

我确定这可能是一个非常简单的事情，但我无法理解它。

来源

2012-01-30 michaelmcgurk

你能不能解释一下什么是错的，请检查该演示 http://jsfiddle.net/nPdNd/29/

？另外，你确定人们会使用IE6吗？ – CoffeeRain 2012-01-30 14:37:04

什么是IE6？我可以吃它吗？ – Niklas 2012-01-30 14:37:50

对不起。在IE6上，当我将鼠标悬停在“Delivery Info”上时，没有出现菜单。在所有现代浏览器中，下面都会出现一个菜单。你可以在IE6中使用现代浏览器和（如果可能）尝试JSDOit示例吗？我相信有些用户仍然会使用IE6--我知道，我知道:) – michaelmcgurk 2012-01-30 14:38:44

我发现this一个简单的JQuery解决方法。

HTML ...

<div id="theBox" class="hoverable"> 
<h2>Hover Over Me!</h2> 
</div>

只需添加类“hoverable”所有你想成为上空盘旋标签。

CSS ...

#theBox { 
    width:200px; 
    height:200px; 
    background:#F1E592; 
    margin:50px auto; 
    border:5px solid #540505; 
} 
#theBox.hovered, #theBox:hover { 
    width:200px; 
    height:200px; 
    background:#540505; 
    border:margin:50px auto; 
    border:5px solid #F1E592; 
}

JQuery的...

$(document).ready(function() { 
     $('.hoverable').hover(
      function() { 
      $(this).addClass('hovered'); /* On hover add the class 'hovered' and apply the hovered styles */ 
      }, function() { 
      $(this).removeClass('hovered'); /* On mouseout remove the class 'hovered' and reset the styles */ 
      } 
     ); 
    });

来源

2012-01-30 14:58:56 CoffeeRain

这里有一个jQuery修复 http://www.danvega.org/blog/2008/1/1/CSS-hover-selector

我们必须使用一个类似的修复，以显示透明PNG图像。（IE关闭javascript只是不会看起来漂亮的任何方式，你看它）。

来源

2012-01-30 14:38:31 Kaido

请看看 - 谢谢。 – michaelmcgurk 2012-01-30 14:40:32

问题IE6悬停功能不工作 “李：悬停”，这只能在 “一” 的标签悬停功能的工作

所以我们使用jQuery“li”悬停功能，它将支持所有浏览器

<script type="text/javascript"> 
    $('ul#nav li').hover(function() 
       { 
       $(this).find('ul').stop(true,true).slideDown() 
       }, 
       function() 
       { 
       $(this).find('ul').stop(true,true).slideUp() 
}); 
</script>

如果您有任何疑问，请回覆此

来源

2012-04-23 11:56:08 ShibinRagh

CSS菜单悬停的IE6问题

回答

相关问题