一个关于节点的问题，高手请进

var objs=document.getElementById("nav").getElementsByTagName("ui")

解决方案 »

  1.   

    <script type="text/javascript" src="http://www.meizz.com/ui/scripts/jsframework.js"></script>
    <script type="text/javascript" src="http://www.meizz.com/ui/scripts/System/Global.js"></script>
    <script type="text/javascript" src="http://www.meizz.com/ui/scripts/System/Data/MzDataProvider.js"></script>
    <script type="text/javascript" src="http://www.meizz.com/ui/scripts/System/Web/Forms/MzEffect.js"></script>
    <script type="text/javascript" src="http://www.meizz.com/ui/scripts/System/Web/UI/WebControls/MzTreeView.js"></script>
    <body>
    <ul id="nav">
      <li><a href="">文章</a>
        <ul>
          <li><a href="">CSS教程</a> 
          <ul>
          <li>三级列表</li>
          </ul>
          </li>
      
          <li ><a href="">DOM教程</a></li>
          <li ><a href="">XML教程</a></li>
          <li ><a href="">Flash教程</a></li>
    </ul>
    </li>  <li><a href="">参考</a>
        <ul>
          <li><a href="">XHTML</a></li>
          <li><a href="">XML</a></li>
          <li><a href="">CSS</a></li>
        </ul>
      </li>
    </ul>
    <script type="text/javascript">
    <!--
    var tree = new MzTreeView();
    tree.dataSource = {"-1_0": "text:root;ULData:nav"};
    document.write(tree.render());
    tree.expandAll("-1");
    //-->
    </script>
      

  2.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>css菜单演示</title>
    <style type="text/css">
    <!--
    #{margin:0;padding:0;border:0;}/*要定义margin属性为0px;否则下拉会居中*/
    body { font-family: arial, 宋体, serif; font-size:13px;}/*下拉菜单样式*/
    #menu { width:520px; height:24px;background:#B9D3EE}
    #nav {line-height: 24px;}
    #nav a {display: block; text-align:center;}
    #nav a:visited  {color:#000000;text-decoration:none;}
    #nav li {float: left; width: 80px; }/*首层背景色*/
    #nav li a:hover{background:#FFD39B;}/*经过背景色*/
    #nav li ul { left: -1000em; position: absolute;}
    #nav li ul li{ width: 120px;background:#ECECEC; border:1px solid #B9D3EE; border-top:none;}/*下拉列表层背景色,属性*/
    #nav li ul a:hover  {color:#000000;}/*下拉列表层经过属性*/
    #nav li.showhide ul {left: auto;}
    #nav li.showhide ul li ul { left: -1000em; position: absolute;}
    #nav li.showhide ul li.showhide ul {left: 120px; top: 0px; }/*下拉菜单结束*/
    -->
    </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    function showMenu() {
        var sfEls = document.body.getElementsByTagName("li");
        for (var i = 0; i < sfEls.length; i++) {
            sfEls[i].onmouseover = function showMenu() {
            this.className += (this.className.length > 0 ? " " : "") + "showhide";
            }
     
            sfEls[i].onmouseout = function showMenu() {
            this.className = this.className.replace(new RegExp("( ?|^)showhide\\b"), "");
            }
        }
    }
    window.onload=showMenu;//--><!]]></script>
    </head><body><!--菜单-->
    <div id="menu">
    <ul id="nav">
    <li><a href="#">关于聚想</a>
    <ul>
    <li><a href="#">产品一</a><ul><li>三级列表</li></ul></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    </ul>
    </li>
    <li><a href="#">案例展示</a>
    <ul>
    <li><a href="#">服务二</a><ul><li>三级列表</li></ul></li>
    <li><a href="#">服务二</a></li>
    <li><a href="#">服务二</a></li>
    <li><a href="#">服务二服务二</a></li>
    <li><a href="#">服务二服务二服务二</a></li>
    <li><a href="#">服务二</a></li>
    </ul>
    </li>
    <li><a href="#">网络推广</a>
    <ul>
    <li><a href="#">案例三</a></li>
    <li><a href="#">案例</a></li>
    <li><a href="#">案例三案例三</a></li>
    <li><a href="#">案例三案例三案例三</a></li>
    </ul>
    </li>
    <li><a href="#">联系我们</a>
    <ul>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四111</a></li>
    </ul>
    </li>
    <li><a href="#">在线演示</a>
    <ul>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示演示演示演示</a></li>
    </ul>
    </li>
    <li><a href="#">联系我们</a>
    <ul>
    <li><a href="#">联系联系联系联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    <li><a href="#">联系</a></li>
    <li><a href="#">联系联系</a></li>
    <li><a href="#">联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    </ul>
    </li>
    </ul>
    </div></body></html>
      

  3.   

    这样可以支持很多级
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>css菜单演示</title>
    <style type="text/css">
    <!--
    #{margin:0;padding:0;border:0;}/*要定义margin属性为0px;否则下拉会居中*/
    body { font-family: arial, 宋体, serif; font-size:13px;}/*下拉菜单样式*/
    #menu { width:520px; height:24px;background:#B9D3EE}
    #nav {line-height: 24px;}
    #nav a {display: block; text-align:center;}
    #nav a:visited  {color:#000000;text-decoration:none;}
    #nav li {float: left; width: 80px; }/*首层背景色*/
    #nav li a:hover{background:#FFD39B;}/*经过背景色*/
    #nav li ul { left: -1000em; position: absolute;}
    #nav li ul li{ width: 120px;background:#ECECEC; border:1px solid #B9D3EE; border-top:none;}/*下拉列表层背景色,属性*/
    #nav li ul a:hover  {color:#000000;}/*下拉列表层经过属性*/
    #nav li.showhide ul {left: auto;}/*下拉菜单结束*/
    -->
    </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    function writecss(cssstr, level)
    {
    if (level == 0) return;
    document.writeln(cssstr + 'li ul a:hover  {color:#000000;}');
    document.writeln(cssstr + 'li ul li{ width: 120px;background:#ECECEC; border:1px solid #B9D3EE; border-top:none;}');
    document.writeln(cssstr + 'li ul { left: -1000em; position: absolute;}');
    document.writeln(cssstr + 'li.showhide ul {left: 120px; top: 0px; }');
    cssstr += "li.showhide ul ";
    writecss(cssstr, --level);
    }
    var css_level = 5;//定义几级菜单
    document.writeln('<style type="text/css">');
    writecss('#nav li.showhide ul ', css_level - 2);
    document.writeln('</style>');
    function showMenu() {
        var sfEls = document.body.getElementsByTagName("li");
        for (var i = 0; i < sfEls.length; i++) {
            sfEls[i].onmouseover = function showMenu() {
            this.className += (this.className.length > 0 ? " " : "") + "showhide";
            }
     
            sfEls[i].onmouseout = function showMenu() {
            this.className = this.className.replace(new RegExp("( ?|^)showhide\\b"), "");
            }
        }
    }
    window.onload=showMenu;//--><!]]></script>
    </head><body><!--菜单-->
    <div id="menu">
    <ul id="nav">
    <li><a href="#">关于聚想</a>
    <ul>
    <li><a href="#">产品一</a>
    <ul>
    <li><a href="#">三级列表</a>
    <ul>
    <li><a href="#">四级列表</a>
    <ul>
    <li><a href="#">五级列表1</a></li>
    <li><a href="#">五级列表2</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    </ul>
    </li>
    <li><a href="#">案例展示</a>
    <ul>
    <li><a href="#">服务二</a><ul><li>三级列表</li></ul></li>
    <li><a href="#">服务二</a></li>
    <li><a href="#">服务二</a></li>
    <li><a href="#">服务二服务二</a></li>
    <li><a href="#">服务二服务二服务二</a></li>
    <li><a href="#">服务二</a></li>
    </ul>
    </li>
    <li><a href="#">网络推广</a>
    <ul>
    <li><a href="#">案例三</a></li>
    <li><a href="#">案例</a></li>
    <li><a href="#">案例三案例三</a></li>
    <li><a href="#">案例三案例三案例三</a></li>
    </ul>
    </li>
    <li><a href="#">联系我们</a>
    <ul>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四111</a></li>
    </ul>
    </li>
    <li><a href="#">在线演示</a>
    <ul>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示演示演示演示</a></li>
    </ul>
    </li>
    <li><a href="#">联系我们</a>
    <ul>
    <li><a href="#">联系联系联系联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    <li><a href="#">联系</a></li>
    <li><a href="#">联系联系</a></li>
    <li><a href="#">联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    </ul>
    </li>
    </ul>
    </div></body></html>
      

  4.   

    用2007-04-13 13:44:34 这个时间发的那个,应该可以满足你的要求
    其中有var css_level = 5;//定义几级菜单
    这个常量动态修改，要显示几级，就改几。
      

  5.   

    还请问下，如果一及菜单和二级菜单的信息条目用不同的背景该如何设置css
    谢谢！！！