ul li下拉菜單隱藏在IE的內容後面

我加入了大量的相對和z-index，因爲它似乎就是我需要做的，但我很困惑。ul li下拉菜單隱藏在IE的內容後面

的HTML是：

 <script type="text/javascript"> 
    sfHover = function() { 
var sfEls = document.getElementById("nav").getElementsByTagName("li"); 
for (var i=0; i<sfEls.length; i++) { 
    sfEls[i].onmouseover=function() { 
     this.className+=" hover"; 
    } 
    sfEls[i].onmouseout=function() { 
     this.className=this.className.replace(new RegExp(" hover\\b"), ""); 
    } 
} 
    } 
    if (window.attachEvent) window.attachEvent("onload", sfHover); 

    </script> 

    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> 
     </head> 


    <body id="body"> 
    <div id="wrap" class="opaque"> 

    <!-- header n menu area --> 
    <div id="header"> 
    <div id="logo"> 
    <img src="images/logo.jpg" width="918" height="142" />  </div> 

    <div id="menu" > 

     <ul id="nav"> 
      <li><a href="#">HOME</a> 
      <li><a href="doors.htm">DOORS</a> 
        <ul id="dropm"> 
         <li><a href="pivot.html"> PIVOT </li> 
         <li> <a href="entry.html">ENTRY </li> 
         <li> <a href="bifold.html">BIFOLD </li> 
         <li> <a href="internal.html">INTERNAL    </li> 
        </ul> 
      </li> 
      <li ><a href="windows.html">WINDOWS</a></li> 
      <li ><a href="floor.html"> TIMBER FLOORING </a></li> 
      <li><a href="stair.html">STAIRCASES</a></li> 
      <li><a href="about.html">ABOUT US</a></li> 
      <li><a href="contact.html">CONTACT US</a></li> 
     </ul> 
    </div> 
    </div> 






    #wrap { 
background-color:#FFF; 
width: 960px; 
position:relative; 
margin-top: 0; 
margin-right: auto; 
margin-bottom: 0; 
margin-left: auto; 
    } 



    /*header area*/ 
    #logo { 
width:940px; 
padding-top: 20px; 
padding-left: 20px; 
    } 

    #menu { 
background-color: #990000; 
height:40px; 
margin-bottom:200px; 
margin-bottom-color:none; 
margin-left:auto; 
margin-right:auto; 
z-index:1; 
position:relative; 

    } 

    * html #menu { 
z-index:2; 
height:35px; 
    } 
    #nav { 
margin-left: 30px; 
position:relative; 


    } 

    #nav li{ 
display: inline; 
list-style: none; 
color: #FFF; 
margin-right: 10px; 
padding-right:3px; 
font-weight:bold; 
    } 

    ul { 
list-style: none; 
padding: 0; 
margin: 0; 

    } 

    li { /* all list items */ 
float: left; 
position: relative; 


    } 
    #menu li { 
display: inline; 
list-style-type: none; 
margin-right: 10px; 
padding-right: 50px; 
color: #ffffff; 
    padding: 10px 15px 8px 15px; 
    /* background-color:#2C5463;*/ 
position:relative; 
float:left; 
    white-space: nowrap; 

    } 

    li ul { 
display:none; 
position: absolute; 
top: 1.5em; 
left: 0.2em; 
    } 
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ 
margin-top: -40px; 
margin-left: -7px; 
    } 

    ul li a:hover, ul li a.hover { 
background:#FF6600; 
    } 

    li:hover ul, li.hover ul { 
    display: block; 
position:absolute; 
    font-size: 11px; 
margin-top:20px; 
margin-left:-5px; 
text-align:left; 
    width: 40px; 
    } 

    * html li:hover ul, li.hover ul { 
    display: block; 
position:absolute; 
    font-size: 11px; 
margin-top:17px;  
text-align:left; 
    width: 40px; 
    } 


    #nav li:hover li, #nav li.hover li { 
float: left; 

    } 

    #nav li:hover, #nav li.hover {background:#CC6600; position:relative;} 

    #dropm { z-index:1000;} 

    #dropm li { 
width:60px; 
background:#990000; 
    } 

    #dropm li{ 
display:block; 
list-style-type: none; 
width:58px; 
color: #FFF; 

border-top: 1px solid #fffff; 
color: #ffffff; 
    padding: 10px 15px 10px 15px; 
    background: #990000; 
    white-space: nowrap; 
    } 


    * html ul li { float: left; } 
    * html ul li a { height: 1%; }

來源

2012-02-03 lizzie17

感謝張貼的代碼。什麼是問題？ – akonsu 2012-02-03 02:23:31

「ul li下拉菜單隱藏在IE後面的內容」 – 2012-02-03 02:26:35

是的。不僅僅是，它實際上也隱藏在鉻上的閃光燈後面 – lizzie17 2012-02-05 01:39:18

發現，

必須將wmode改變透明

來源

2012-03-18 22:38:53 lizzie17

ul li下拉菜單隱藏在IE的內容後面

回答

相關問題