IE8のマルチレベルポップアウトメニューの問題

thisチュートリアルhere's the pageから多段階のポップアウトメニューを作成しました。IE8のマルチレベルポップアウトメニューの問題

すべてのブラウザバーIE8では完璧に機能しています。第3層は第2層の背後に隠れています。

誰でも問題の内容を確認できますか？

ここではコードです：

<div id="menu"> 
    <div id="menu-edge"></div> 

<ul id="nav"> 
    <li class="top"><a class="top_link" href="http://www.match.ac.uk">Home</a></li> 
    <li class="top"><a class="top_link" href="/about.php">About</a> 
     <ul class="sub" style="margin-left:0px;"> 
      <li><a class="fly" href="/theteam.php">The Team</a> 
       <ul class="sub-popout"> 
        <li><a href="/researchers.php">Researchers</a></li> 
        <li><a href="/management.php">Management</a></li> 
        <li><a href="/investigators.php">Investigators</a></li> 
        <li><a href="/students.php">PhD Students</a></li>                
       </ul> 
      </li> 
      <li><a href="/vision.php">Our Vision</a></li> 
      <li><a href="/strategy.php">Strategy</a></li> 
      <li><a href="/achievements.php">Achievements</a></li> 
      <li><a href="/literature.php">Literature</a></li> 
     </ul>  
    </li> 
    <li class="top"><a class="top_link" href="/membership.php">Membership</a> 
     <ul class="sub" style="margin-left:0px;"> 
      <li><a href="/level1.php">Level 1 - Micro</a></li> 
      <li><a href="/level2.php">Level 2 - SME/Division</a></li>    
      <li><a href="/level3.php">Level 3 - Large</a></li> 
      <li><a href="/level1.php">Level 4 - Macro</a></li> 
      <li><a href="/additional.php">Additional Services</a></li>       
     </ul> 
    <li class="top"><a class="top_link" href="/research.php">Research</a> 
     <ul class="sub" style="margin-left:0px;"> 
      <li><a href="/projecti.php">Project I - Tools for Industry</a></li> 
      <li><a href="/projectii.php">Project II - Economic Evaluation</a></li>  
      <li><a href="/projectiii.php">Project III - User Needs</a></li> 
      <li><a href="/projectiv.php">Project IV - Implementation Issues</a></li> 
     </ul>     
    <li class="top"><a class="top_link" href="/publications.php">Publications</a> 
     <ul class="sub" style="margin-left:0px;"> 
      <li><a href="/2011.php">2011</a></li> 
      <li><a href="/2010.php">2010</a></li> 
      <li><a href="/2009.php">2009</a></li> 
      <li><a href="/2008.php">2008</a></li> 
      <li><a href="/2007.php">2007</a></li> 
      <li><a href="/2006.php">2006</a></li> 
      <li><a href="/2005.php">2005</a></li> 
      <li><a href="/2004.php">2004</a></li> 
      <li><a href="/deliverables.php">Deliverables</a></li> 
      <li><a href="/innovative-manufacturing.php">Innovative Manufacturing</a></li>                              
     </ul> 
    <li class="top"><a class="top_link" href="/news-events.php">News &amp; Events</a> 
     <ul class="sub" style="margin-left:0px;"> 
      <li><a href="/news.php">News</a></li> 
      <li><a href="/events.php">Events</a></li> 
      <li><a href="/training.php">Training &amp; Workshops</a></li> 
     </ul>         
    <li class="top"><a class="top_link" href="/partners.php">Partners</a> 
    <li class="top"><a class="top_link" href="/contact.php">Contact Us</a> 
</ul> 
</div>

CSS：

#menu { 
    float:right; 
    height:33px; 
    background-color:#00B1E8; 
    margin-top:14px; 
    width:749px; 
    } 


#nav { 
    padding:5px 0 0 0; 
    margin:0 0 0 79px; 
    list-style:none; 
    height:27px; 
    background-color:#00B1E8; 
    position:relative; 
    z-index:500; 
    font-size:13px; 
    } 
#nav li.top {display:block; float:left; height:33px;} 

a.no-sub { 
    color:#ffffff; 
    display:block; float:left; height:33px; text-decoration:none; margin-right: 20px; cursor:pointer; 
    } 

a.no-sub:hover { 
    color:#1D71B8; 
    display:block; float:left; height:33px; text-decoration:none; margin-right: 20px; cursor:pointer; 
    } 

#nav li a.top_link {display:block; float:left; height:33px; color:#fff; text-decoration:none; margin-right: 20px; cursor:pointer;} 
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;} 
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;} 

#nav li:hover a.top_link {color:#1D71B8;} 
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;} 
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;} 

/* Default list styling */ 

#nav li:hover {position:relative; z-index:200;} 

#nav li:hover ul.sub { 
    left:1px; 
    top:26px; 
    padding:3px; 
    white-space:nowrap; 
    width:250px; 
    height:auto; 
    z-index:300; 
    background:transparent; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#00B1E8,endColorStr=#00B1E8); 
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00B1E8,endColorstr=#00B1E8)"; 
    zoom: 1; 
    background-color: rgba(54, 169, 225, 0.8); 
    } 

#nav li:hover ul.sub li 
{display:block; height:20px; position:relative; float:left; width:250px; font-weight:normal;} 

#nav li:hover ul.sub li a { 
    display:block; 
    height:18px; 
    width:250px; 
    line-height:18px; 
    text-indent:5px; 
    color:#fff; 
    text-decoration:none; 
    } 

#nav li ul.sub li a.fly 
{background-color:#0e71b8;} 
#nav li:hover ul.sub li a:hover 
{background-color:#0e71b8;} 
#nav li:hover ul.sub li a.fly:hover 
{background-color:#0e71b8;} 


#nav li:hover li:hover ul, 
#nav li:hover li:hover li:hover ul, 
#nav li:hover li:hover li:hover li:hover ul, 
#nav li:hover li:hover li:hover li:hover li:hover ul 
{left:251px; 
top:-3px; 
background:transparent; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#00B1E8,endColorStr=#00B1E8); 
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00B1E8,endColorstr=#00B1E8)"; 
    zoom: 1; 
    background-color: rgba(54, 169, 225, 0.8); padding:3px; white-space:nowrap; width:250px; z-index:400; height:auto;} 

#nav ul, 
#nav li:hover ul ul, 
#nav li:hover li:hover ul ul, 
#nav li:hover li:hover li:hover ul ul, 
#nav li:hover li:hover li:hover li:hover ul ul 
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} 

#nav li:hover li:hover a.fly, 
#nav li:hover li:hover li:hover a.fly, 
#nav li:hover li:hover li:hover li:hover a.fly, 
#nav li:hover li:hover li:hover li:hover li:hover a.fly 
{background-color:#0e71b8; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly, 
#nav li:hover li:hover li:hover li a.fly, 
#nav li:hover li:hover li:hover li:hover li a.fly 
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}

がここにJSだ：

stuHover = function() { 
    var cssRule; 
    var newSelector; 
    for (var i = 0; i < document.styleSheets.length; i++) 
     for (var x = 0; x < document.styleSheets[i].rules.length ; x++) 
      { 
      cssRule = document.styleSheets[i].rules[x]; 
      if (cssRule.selectorText.indexOf("LI:hover") != -1) 
      { 
       newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover"); 
       document.styleSheets[i].addRule(newSelector , cssRule.style.cssText); 
      } 
     } 
    var getElm = document.getElementById("nav").getElementsByTagName("LI"); 
    for (var i=0; i<getElm.length; i++) { 
     getElm[i].onmouseover=function() { 
      this.className+=" iehover"; 
     } 
     getElm[i].onmouseout=function() { 
      this.className=this.className.replace(new RegExp(" iehover\\b"), ""); 
     } 
    } 
} 
if (window.attachEvent) window.attachEvent("onload", stuHover);

出典

2011-06-22 Rob

は私のために働いているようです。あなたはそれを修正しましたか？ –

@GaryRyan IE8で試したことはありますか？これは動作しない唯一のブラウザです。 – Rob

はい、申し訳ありませんが、あなたの権利。私は間違ったサイトをコピーして貼り付けた...悪い。 –

これはあなたのHTMLのトップです：

<!-- header --> 
<!-- SEO elements to be edited per page, enter your keywords between the "" --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

トップにあるこれらのコメントは、IEの使用をQuirks Modeにしています。

<!DOCTYPE html ..が最初の行で、IEが標準モードを使用していることを確認して、問題が解決する可能性があります。あなたのCSSで

は、 #nav li:hover ul.subの内側には、削除する必要があります。それらの原因 overflow: hidden -esque効果を使用して

filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#00B1E8,endColorStr=#00B1E8); 
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00B1E8,endColorstr=#00B1E8)";

、そしてあなたのサブメニューを見ることができない理由です。

出典

2011-06-22 11:26:07 thirtydot

ちょうどコメントを取って、メニューに何の違いもありませんでした。 – Rob

私は自分の答えを更新しました。これは完全な解決策ではありませんが、2番目のレベルのサブメニューは表示されません。 – thirtydot

ありがとう@thirtydot、それは動作しているが、そのCSSを削除して別の問題を投げた。私は他のすべてのブラウザで動作する透明な背景を持っています。これはIEのための修正であり、今は背景がありません。 IEのためにもう一度表示される方法はありますか（堅実なものがあります）、他のすべてのブラウザで透明性を示していますか？ – Rob

-1

Multilevel CSS Menu<br> 
Demo <a href="www.mremind.com">Here</a><br> 
<h2>Css For Menu</h2> 
<p> 
/** 
* MAIN NAVIGATION 
**/ 
#mainNav {`enter code here` 

    height:60px; 
    margin: 0 auto; 

    padding-left: 15px; 
    width:1000px; 
    vertical-align: middle; 

    } 


#mainNav ul{ 
    list-style-type:block; 
    list-style-image:none; 
    background:red; 

    margin: 0; 
    padding-right: 0px; 

    padding-left: 0px; 

    line-height: 100%; 
    -khtml-border: 1px solid #BFDBD7; 



    box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); 

    vertical-align: middle; 
    } 




/************************************** Main Navigation boxes ******************************************************/ 
#mainNav ul li.navItems{ 
    float:left; 
    display:inline-block; 
    width:94px; 
    height:60px; 
    border-left:solid 1px #D7D7D7; 

    } 
#mainNav ul li.navItems:hover{ 

    background:#034693; 
    } 
#mainNav ul li.navItems:current{ 

    } 
#mainNav ul li.navItems > a{ 
    width:94px; 
    height:60px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#4D4D4D; 
    display:block; 
    line-height:5.5em; 
    text-decoration:none; 
    text-align:center; 
    } 
#mainNav ul li.navItems a:hover{ 
    color:#FFF; 
    } 

#mainNav ul li.navItems:hover a{ 
    color:#FFF; /*keeps main nav text white upon rollover*/ 
    } 
#mainNav ul li.navItems:hover ul a{ 
    color:#4D4D4D; /*stops sublinks from being white */ 
    } 






/* Dropdown List */ 

#mainNav ul li.navItems ul{ 
    background:#FAFAFA; 
    border:1px solid #CCC; 
    list-style:none; 
    position:absolute; 
    display:none; 
    width:250px; 

    z-index:100; 
    } 

    #mainNav ul li.navItems ul li 
    { 

     padding: 10px 0; 
     font-size: 13px; 
     line-height: 1.5em !important; 
     border-bottom: 1px solid #CCC; 
     white-space: nowrap; 
     text-align: left; 

    } 
    #mainNav ul li.navItems ul li a{ 

    font-size: 13px; 
    line-height: 1.5em !important; 
    text-align: left; 
    text-decoration: none; 
    padding-left:5px; 

    } 
#mainNav ul li.navItems:hover ul li > a:hover{ 
    background:#034693; 
    color:#FFF; 
    } 


    #mainNav ul li.navItems:hover ul li:hover{ 
    background:#034693; 
    color:#FFF; 
    } 

    #mainNav ul li.navItems:hover ul li:hover > a{ 
    background:#034693; 
    color:#FFF; 
    } 

#mainNav ul li.navItems:hover ul.secondul{ 
    display:block; 
    position:absolute; 
    } 






/************************************** Sub Menu boxes ******************************************************/ 





    #mainNav ul.secondul li.MarketingLI:hover ul 
    { 

    display:block; 
    position:absolute; 


    } 




    #mainNav ul.secondul li.MarketingLI ul{ 
    width:200px; 

    padding:0; 
    font-size:13px; 
    line-height:1.5em !important; 
    border-bottom:1px solid #CCC; 
    white-space:nowrap; 
    text-align:left; 
    display:none; 
    top:0; 
    margin-left:100%; 

    } 
</p><br> 
<br> 
<h2>HTML</h2><br> 
<p> 
<div id="mainNav"> 
      <ul > 

       <li class="navItems"><a href=""></a> </li> 
       <li class="navItems" ><a class="first" href="#"></a> 


       <ul class="secondul"> 
         <li class="MarketingLI"><a class="first" href=""></a> 

         <ul > 
          <li ><a href="">2nd Level 1</a> 
          </li> 

          <li ><a href="">2nd Level 1</a> 
          </li> 

          <li ><a href="">2nd Level 1</a> 
          </li> 

         </ul> 

         </li> 
         <li><a href=""></a> 
         </li> 
         <li><a href="#"></a></li> 

        </ul> 
       </li> 
       <li class="navItems"><a href=""></a> 
       </li> 

       <li class="navItems"><a href=""></a></li> 
       <li class="navItems"><a href=""></a> </li> 
       <li class="navItems"><a href=""></a> </li> 
      </ul> 
      <!--mainNav--> 
     </div> 
</p>

出典

2012-07-05 13:51:30

大規模なコードブロックを投稿するのではなく、答えを記述する必要があります。 –

IE8のマルチレベルポップアウトメニューの問題

答えて

関連する問題