• Html : 实现动态添加下拉菜单。。。。。。


    只要把html代码里的菜单文字换成服务器控件就可以了,在后台可以设置,绑定。。。。。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     
    <HTML>
        
    <HEAD>
            
    <title>WebForm5</title>

            
    <style>/* Root = Horizontal, Secondary = Vertical */
    ul#navmenu-h 
    {
      margin
    : 0;
      border
    : 0 none;
      padding
    : 0;
      width
    : 500px; /*For KHTML*/
      list-style
    : none;
      height
    : 24px;
    }

    ul#navmenu-h li 
    {
      margin
    : 0;
      border
    : 0 none;
      padding
    : 0;
      float
    : left; /*For Gecko*/
      display
    : inline;
      list-style
    : none;
      position
    : relative;
      height
    : 24px;
    }

    ul#navmenu-h ul 
    {
      margin
    : 0;
      border
    : 0 none;
      padding
    : 0;
      width
    : 160px;
      list-style
    : none;
      display
    : none;
      position
    : absolute;
      top
    : 24px;
      left
    : 0;
    }

    ul#navmenu-h ul:after 
    /*From IE 7 lack of compliance*/{
      clear
    : both;
      display
    : block;
      font
    : 1px/0px serif;
      content
    : ".";
      height
    : 0;
      visibility
    : hidden;
    }

    ul#navmenu-h ul li 
    {
      width
    : 160px;
      float
    : left; /*For IE 7 lack of compliance*/
      display
    : block !important;
      display
    : inline; /*For IE*/
    }

    /* Root Menu */
    ul#navmenu-h a 
    {
      border
    : 1px solid #FFF;
      border-right-color
    : #CCC;
      border-bottom-color
    : #CCC;
      padding
    : 0 6px;
      float
    : none !important; /*For Opera*/
      float
    : left; /*For IE*/
      display
    : block;
      background
    : #EEE;
      color
    : #666;
      font
    : bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
      text-decoration
    : none;
      height
    : auto !important;
      height
    : 1%; /*For IE*/
    }

    /* Root Menu Hover Persistence */
    ul#navmenu-h a:hover,
    ul#navmenu-h li:hover a,
    ul#navmenu-h li.iehover a 
    {
      background
    : #CCC;
      color
    : #FFF;
    }

    /* 2nd Menu */
    ul#navmenu-h li:hover li a,
    ul#navmenu-h li.iehover li a 
    {
      float
    : none;
      background
    : #EEE;
      color
    : #666;
    }

    /* 2nd Menu Hover Persistence */
    ul#navmenu-h li:hover li a:hover,
    ul#navmenu-h li:hover li:hover a,
    ul#navmenu-h li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover a 
    {
      background
    : #CCC;
      color
    : #FFF;
    }

    /* 3rd Menu */
    ul#navmenu-h li:hover li:hover li a,
    ul#navmenu-h li.iehover li.iehover li a 
    {
      background
    : #EEE;
      color
    : #666;
    }

    /* 3rd Menu Hover Persistence */
    ul#navmenu-h li:hover li:hover li a:hover,
    ul#navmenu-h li:hover li:hover li:hover a,
    ul#navmenu-h li.iehover li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover li.iehover a 
    {
      background
    : #CCC;
      color
    : #FFF;
    }

    /* 4th Menu */
    ul#navmenu-h li:hover li:hover li:hover li a,
    ul#navmenu-h li.iehover li.iehover li.iehover li a 
    {
      background
    : #EEE;
      color
    : #666;
    }

    /* 4th Menu Hover */
    ul#navmenu-h li:hover li:hover li:hover li a:hover,
    ul#navmenu-h li.iehover li.iehover li.iehover li a:hover 
    {
      background
    : #CCC;
      color
    : #FFF;
    }

    ul#navmenu-h ul ul,
    ul#navmenu-h ul ul ul 
    {
      display
    : none;
      position
    : absolute;
      top
    : 0;
      left
    : 160px;
    }

    /* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu-h li:hover ul ul,
    ul#navmenu-h li:hover ul ul ul,
    ul#navmenu-h li.iehover ul ul,
    ul#navmenu-h li.iehover ul ul ul 
    {
      display
    : none;
    }

    ul#navmenu-h li:hover ul,
    ul#navmenu-h ul li:hover ul,
    ul#navmenu-h ul ul li:hover ul,
    ul#navmenu-h li.iehover ul,
    ul#navmenu-h ul li.iehover ul,
    ul#navmenu-h ul ul li.iehover ul 
    {
      display
    : block;
    }

    </style><script language="javascript">
    navHover 
    = function() {
        
    var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
        
    for (var i=0; i<lis.length; i++) {
            lis[i].onmouseover
    =function() {
                
    this.className+=" iehover";
            }
            lis[i].onmouseout
    =function() {
                
    this.className=this.className.replace(new RegExp(" iehover\\b"), 

    "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", navHover);
            
    </script>
        
    </HEAD>
        
    <body>
       
    <ul id="navmenu-h">
       
    <li><href="#">Root nav item1</a>
       
    <ul>
       
    <li><href="#">Sub nav item1</a></li>
    <li><href="#">Sub nav item1-2</a></li>
       
    </ul>
       
    </li>
    <li><href="#">Root nav item2</a>
       
    <ul>
       
    <li><href="#">Sub nav item2</a></li>
    <li><href="#">Sub nav item2-2</a></li>
       
    </ul>
       
    </li>
    <li><href="#">Root nav item3</a>
       
    <ul>
       
    <li><href="#">Sub nav item3</a></li>
    <li><href="#">Sub nav item3-2</a></li>
       
    </ul>
       
    </li>
       
    </ul>
    </body>
    </html>
  • 相关阅读:
    NHibernate 过滤器(第十五篇)
    NHibernate 存储过程 第十四篇
    NHibernate 操作视图 第十三篇
    NHibernate Linq查询 扩展增强 (第九篇)
    NHibernate 之数据操作 (第五篇)
    NHibernate之一级缓存(第十篇)
    jQueryEasyUI
    linux的systemctl 命令用法 转
    linux dig命令 转
    OPTAUTH 两步验证详解
  • 原文地址:https://www.cnblogs.com/Fooo/p/1446400.html
Copyright © 2020-2023  润新知