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

最新推荐文章于 2024-10-01 20:12:28 发布

weixin_34150224

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量149

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kting/p/2748036.html

版权

<!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>