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>
  • 相关阅读:
    How to Automate IIS 7 Configuration with .NET
    windows phone 学习
    Redis VS. Memcached
    ROWNUM使用方法
    摘自----聊聊盛大的经验值
    理解Sql语句
    Odp.net 动态创建变量in
    ORACLE PLSQL DEVELOPER 中显示科学计数法
    http error 500.22 internal server error
    Resharper8 visual studio 中文版 快捷键无法使用
  • 原文地址:https://www.cnblogs.com/studio313/p/647824.html
Copyright © 2011-2022 走看看