zoukankan      html  css  js  c++  java
  • 一个符合WEB标准的横向下拉菜单

    <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <title>横向下拉菜单</title>
    <style type="text/css">
    <!--
    {margin:0;padding:0;border:0;}

    body 
    {
     font-family
    : arial, 宋体, serif;
            font-size
    :12px;
    }


    #nav 
    {
      height
    : 24px;  list-style-type: none;  padding-left:200px; 

    line-height
    :24px;overflow:hidden;background:#999;
    }


    #nav a 
    {
     display
    : block; width: 80px; text-align:center;
    }


    #nav a:link  
    {
     color
    :#EEE; text-decoration:none;
    }

    #nav a:visited  
    {
     color
    :#EEE;text-decoration:none;
    }

    #nav a:hover  
    {
     color
    :#FFF;text-decoration:none;font-weight:bold;background:#CCC;
    }


    #nav li 
    {
     float
    : left; width: 80px;
    }



    #nav li ul 
    {
     line-height
    : 24px;  
     list-style-type
    : none;
     text-align
    :left;
     left
    : -999px; 
     width
    : 520px; //注意,这里一定要设置宽度;
     position
    : absolute;
     background
    :#CCC;
    }


    #nav li ul li
    {
      float
    : left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float
    }



    #nav li ul a
    {
     display
    : block; width: 65px;text-align:left;padding-left:15px;
    }


    #nav li ul a:link  
    {
     color
    :#F1F1F1; text-decoration:none;
    }

    #nav li ul a:visited  
    {
     color
    :#F1F1F1;text-decoration:none;
    }

    #nav li ul a:hover  
    {
     color
    :#FFF;text-decoration:none;font-weight:normal;background:#C00;
    }


    #nav li:hover ul 
    {
     left
    :25%;
    }


    #nav li.sfhover ul 
    {
     left
    :25%;
    }


    #content 
    {
     clear
    : left; 
    }



    -->
    </style>

    <script type="text/javascript">
    <!--
    function menuFix() {
     
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
     
    for (var i=0; i<sfEls.length; i++{
      sfEls[i].onmouseover
    =function() {
      
    this.className+=(this.className.length>0? " """+ "sfhover";
      }

      sfEls[i].onMouseDown
    =function() {
      
    this.className+=(this.className.length>0? " """+ "sfhover";
      }

      sfEls[i].onMouseUp
    =function() {
      
    this.className+=(this.className.length>0? " """+ "sfhover";
      }

      sfEls[i].onmouseout
    =function() {
      
    this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

    "");
      }

     }

    }

    window.onload
    =menuFix;

    //-->
    </script>
    </head>
    <body>


    <ul id="nav">
    <li><href="#">菜单一</a>
     
    <ul>
     
    <li><href="#">菜单一</a></li>
     
    <li><href="#">菜单一</a></li>
     
    <li><href="#">菜单一</a></li>
     
    <li><href="#">菜单一</a></li>
     
    <li><href="#">菜单一</a></li>
     
    <li><href="#">菜单一</a></li>
     
    </ul>
    </li>
    <li><href="#">菜单二</a>
     
    <ul>
     
    <li><href="#">菜单二</a></li>
     
    <li><href="#">菜单二</a></li>
     
    <li><href="#">菜单二</a></li>
     
    <li><href="#">菜单二</a></li>
     
    <li><href="#">菜单二</a></li>
     
    </ul>
    </li>
    <li><href="#">菜单三</a>
     
    <ul>
     
    <li><href="#">菜单三</a></li>
     
    <li><href="#">菜单三</a></li>
     
    <li><href="#">菜单三</a></li>
     
    <li><href="#">菜单三</a></li>
     
    <li><href="#">菜单三</a></li>
     
    </ul>
    </li>
    <li><href="#">菜单四</a>
     
    <ul>
     
    <li><href="#">菜单四</a></li>
     
    <li><href="#">菜单四</a></li>
     
    <li><href="#">菜单四</a></li>
     
    <li><href="#">菜单四</a></li>
     
    <li><href="#">菜单四</a></li>
     
    </ul>
    </li>

    <li><href="#">菜单五</a>
     
    <ul>
     
    <li><href="#">菜单五</a></li>
     
    <li><href="#">菜单五</a></li>
     
    <li><href="#">菜单五</a></li>
     
    <li><href="#">菜单五</a></li>
     
    <li><href="#">菜单五</a></li>
     
    </ul>
    </li>
    <li><href="#">菜单六</a>
     
    <ul>
     
    <li><href="#">菜单六</a></li>
     
    <li><href="#">菜单六</a></li>
     
    <li><href="#">菜单六</a></li>
     
    <li><href="#">菜单六</a></li>
     
    <li><href="#">菜单六</a></li>
     
    </ul>
    </li>

    </ul>
    </div>

    </body>
    </html>
  • 相关阅读:
    进制
    流程控制
    运算符
    格式化输出
    数据结构-树的遍历
    A1004 Counting Leaves (30分)
    A1106 Lowest Price in Supply Chain (25分)
    A1094 The Largest Generation (25分)
    A1090 Highest Price in Supply Chain (25分)
    A1079 Total Sales of Supply Chain (25分)
  • 原文地址:https://www.cnblogs.com/studio313/p/647824.html
Copyright © 2011-2022 走看看