zoukankan      html  css  js  c++  java
  • 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;
        12em;
    }
    .sf-menu ul li {
        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
  • 相关阅读:
    HDU1166:敌兵布阵(树状数组)
    elasticsearch 7.4.0依赖
    IntelliJ IDEA手工安装插件方法
    Guava入门
    Maven添加Oracle驱动及依赖
    springboot整合netty(二)
    MyBatis-Plus
    「Chris Richardson 微服务系列」服务发现的可行方案以及实践案例
    spring initializr
    String.Format( )用法
  • 原文地址:https://www.cnblogs.com/kting/p/2748036.html
Copyright © 2011-2022 走看看