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
  • 相关阅读:
    Building a Space Station POJ
    Networking POJ
    POJ 1251 Jungle Roads
    CodeForces
    CodeForces
    kuangbin专题 专题一 简单搜索 POJ 1426 Find The Multiple
    The Preliminary Contest for ICPC Asia Shenyang 2019 F. Honk's pool
    The Preliminary Contest for ICPC Asia Shenyang 2019 H. Texas hold'em Poker
    The Preliminary Contest for ICPC Asia Xuzhou 2019 E. XKC's basketball team
    robotparser (File Formats) – Python 中文开发手册
  • 原文地址:https://www.cnblogs.com/kting/p/2748036.html
Copyright © 2011-2022 走看看