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
  • 相关阅读:
    关于 Node.js: 所有PHP开发人员应该知道的5点
    HTML5网站大观:分享8个精美的 HTML5 网站案例
    一些新的 UI 图免费下载
    用HTML5/CSS3/JS开发Android/IOS应用
    Why C++ ? 王者归来
    响应式网页设计
    60款很酷的 jQuery 幻灯片演示和下载
    25 JavaScript的幻灯片用于在Web布局的精彩案例
    10个帮助你优化网站的 .htaccess 技巧
    视差滚动在网页设计中应用的21个优秀案例
  • 原文地址:https://www.cnblogs.com/kting/p/2748036.html
Copyright © 2011-2022 走看看