IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)

时间:2023-03-08 23:04:59
IE6 下绝对定位position:absolute  与浮动不显示 (IE6 下拉菜单显示)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
   <style type="text/css">
 /*** menu skin ***/

.sf-menu {
    float:left;
    font: 12px Arial;
}
.sf-menu a {
    padding:.75em 1em;
    text-decoration:none;
}
.sf-menu ul a {
    border-bottom: 1px solid #333;
}
.sf-menu a,.sf-menu a:visited {
    /* visited pseudo selector so IE6 applies text colour*/
    color:#eee;
}
.sf-menu li {
    background:#444;
    margin-right:2px;
}
.sf-menu>li {
    border-top-right-radius:4px;
    border-top-left-radius:4px;
    -moz-border-radius-topleft:4px;
    -webkit-border-top-left-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;
}
.sf-menu li li {
    background:#444;
}
.sf-menu li li li {
    background:#444;
}
.sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active {
    background:#555;
    outline:0;
}
.sf-menu>li:hover,.sf-menu>li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active {
    border-top-right-radius:4px;
    border-top-left-radius:4px;
    -moz-border-radius-topleft:4px;
    -webkit-border-top-left-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;
}
.sf-menu li.current {
    background: #266DBB;
}

.sf-menu,.sf-menu  {
    margin:0;
    padding:0;
    list-style:none;
}
.sf-menu {
    line-height:1.0;
}
.sf-menu ul {
    /*position:absolute;*/
    top:-999em;
    width:12em;
}
.sf-menu ul li {
    width:100%;
}
.sf-menu li:hover {
    visibility:inherit;  
}
.sf-menu li {
    float:left;
    position:relative;
}
.sf-menu a {
    display:block;
    position: relative;
}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {
    left:0;
    top:2.5em;  
    z-index:99;
}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {
    top: -999em;
}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {
    left:12em;  
    top:0;
}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {
    top: -999em;
}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {
    left:12em;  
    top:0;
}

ul.sf-menu li ul
{
    clear:both;
 position:absolute;

/*显示下拉菜单时不会原先父菜单下面的内容挤到下面*/

left:-18px; top:30px;/*指定显示菜单的位置,如果不指定,ie6就不能显示子菜单*/
}
/*#nav li  ul
{
    clear:both;
 position:absolute;
 left:-18px; top:30px;
} */
 #nav li  ul li
{  
    display: none;
    clear:both;  
}

#nav li.sfhover ul li, #nav li:hover ul li
{  
  display: block;
}
 
    </style>

<script type="text/javascript"><!--    //--><![CDATA[//><!--
 

//IE6 要调用此方法才能显示子菜单

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

</HEAD>

<BODY>
   <div id="menu" style="z-index: 990;" >
        <ul  class="sf-menu" id="nav" >
                    <li class=''><a href='#2'>明细查询</a>
                        <ul >
                            
                                    <li ><a href='TemperatureSearch.aspx'>温度</a> </li>
                                
                                    <li ><a href='HumiditySearch.aspx'>湿度</a> </li>
                                
                                    <li ><a href='WaterQualitySearch.aspx'>纯水电阻率</a> </li>
                                
                                    <li ><a href='CleanSearch.aspx'>洁净度</a> </li>
                                
                                    <li ><a href='WaterPressureSearch.aspx'>水压</a> </li>
                                
                         </ul>
                    </li>
        </ul>
    </div>
     <br />
    <div style="border:solid 1px black; background-color: rosybrown; z-index: 1;">
    内容 <br />
    内容 <br />
    内容 <br />
    内容 <br />
    内容 <br />
    </div>

</BODY>
</HTML>

http://blog.sina.com.cn/s/blog_77dbebbb0100u7hy.html