Question

我输入了很多相对和z-index，因为看起来这就是我需要做的但我很困惑。

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%; }

Answer 1

找到它，

必须将wmode更改为透明

ul li下拉菜单隐藏在IE上的内容背后

1 个答案: