IE6 Issue with CSS Menu hover

Это основное меню прекрасно работает во всех современных браузерах, но не играет в мяч в IE6.IE6 Issue with CSS Menu hover

Адрес JSDOit example.

И мой 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

Не могли бы вы объяснить, что случилось? Кроме того, вы уверены, что люди будут использовать IE6? – CoffeeRain

Что такое IE6? Могу ли я есть? – Niklas

Извините. В IE6, когда я навешиваю «Информация о доставке», меню не появляется. Во всех современных браузерах меню появляется внизу. Можете ли вы попробовать пример JSDOit в современном браузере и (если возможно) в IE6? Я считаю, что некоторые пользователи все равно будут использовать IE6 - я знаю, я знаю :) – michaelmcgurk

Я нахожу 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

Мы должны использовать аналогичные исправления для отображения прозрачных PNGs. (IE6 с javascript выключен просто не будет выглядеть так, как вы его смотрите.)

источник

2012-01-30 14:38:31 Kaido

Пойдем - спасибо. – michaelmcgurk

Проблема IE6 парить функция не работает "ли: парить", которые парят функцию работать только на "" метки

, поэтому мы используем функцию hover 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>

Пожалуйста, проверьте эту демку http://jsfiddle.net/nPdNd/29/

Если у вас есть какие-либо сомнения просто ответить

источник

2012-04-23 11:56:08 ShibinRagh

IE6 Issue with CSS Menu hover

ответ

Смежные вопросы