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問題

回答

相關問題