着急!!求一三级下拉导航菜单

如题，网上找了好久无果，直接粘贴到dreamweaver报脚本错误，即使能用粘贴到asp.net里有aspx文件里面又不能用了，所以求一个能够直接粘贴到aspx文件里面就能够运行的三级下拉菜单。

解决方案 »

  1.   

    网上很多，
    粘贴到aspx文件时需要把外部的JS文件同时下载引用
      

  2.   

    http://www.open-lib.com/Type/120-1.jsp
    有你要的
      

  3.   

    复制上去运行就是了 无需图片  纯CSS+JS打造<head>
    <title>测试三级导航菜单</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <!--把下面代码加到<head>与</head>之间-->
    <style type="text/css">
    *,body,ul,li,h1,h2{margin:0;padding:0;list-style:none;}
    body{font:12px "宋体";padding-top:20px;}
    #menu{width:200px;margin:auto;}
    #menu h1{cursor:pointer;color:#FFF;font-size:12px;padding:5px 0 3px 10px;border:#C60 1px solid;margin-top:1px;background-color:#F93;}
    #menu h2{cursor:pointer;color:#777;font-size:12px;padding:5px 0 3px 10px;border:#E7E7E7 1px solid;border-top-color:#FFF;background-color:#F4F4F4;}
    #menu ul{padding-left:15px;height:100px;border:#E7E7E7 1px solid;border-top:none;overflow:auto;}
    #menu ul li{padding:5px 0 3px 10px;}
    .no{display:none;}
    </style>
    <script language="JavaScript">
    <!--
    function ShowMenu(obj,noid){
    var block = document.getElementById(noid);
    var n = noid.substr(noid.length-1);
    if(noid.length==4){
    var ul = document.getElementById(noid.substring(0,3)).getElementsByTagName("ul");
    var h2 = document.getElementById(noid.substring(0,3)).getElementsByTagName("h2");
    for(var i=0; i<h2.length;i++){
    h2[i].innerHTML = h2[i].innerHTML.replace("+","-");
    h2[i].style.color = "";
    }
    obj.style.color = "#FF0000";
    for(var i=0; i<ul.length; i++){if(i!=n){ul[i].className = "no";}}
    }else{
    var span = document.getElementById("menu").getElementsByTagName("span");
    var h1 = document.getElementById("menu").getElementsByTagName("h1");
    for(var i=0; i<h1.length;i++){
    h1[i].innerHTML = h1[i].innerHTML.replace("+","-");
    h1[i].style.color = "";
    }
    obj.style.color = "#0000FF";
    for(var i=0; i<span.length; i++){if(i!=n){span[i].className = "no";}}
    }
    if(block.className == "no"){
    block.className = "";
    obj.innerHTML = obj.innerHTML.replace("-","+");
    }else{
    block.className = "no";
    obj.style.color = "";
    }
    }
    //-->
    </script>
    </head>
    <body>
    <!--把下面代码加到<body>与</body>之间-->
    <div id="menu">
    <h1 onClick="javascript:ShowMenu(this,'NO0')"> - 一级菜单A</h1>
    <span id="NO0" class="no">
    <h2 onClick="javascript:ShowMenu(this,'NO00')"> - 一级菜单A_1</h2>
    <ul id="NO00" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
    <li>一级菜单A_6</li>
    <li>一级菜单A_7</li>
    <li>一级菜单A_8</li>
    <li>一级菜单A_9</li>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,'NO01')"> - 一级菜单A_2</h2>
    <ul id="NO01" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
    <li>一级菜单A_6</li>
    <li>一级菜单A_7</li>
    <li>一级菜单A_8</li>
    <li>一级菜单A_9</li>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,'NO02')"> - 一级菜单A_3</h2>
    <ul id="NO02" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
    <li>一级菜单A_6</li>
    <li>一级菜单A_7</li>
    <li>一级菜单A_8</li>
    <li>一级菜单A_9</li>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,'NO03')"> - 一级菜单A_4</h2>
    <ul id="NO03" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
    <li>一级菜单A_6</li>
    <li>一级菜单A_7</li>
    <li>一级菜单A_8</li>
    <li>一级菜单A_9</li>
    </ul>
    </span>
    <h1 onClick="javascript:ShowMenu(this,'NO1')"> - 二级菜单B</h1>
    <span id="NO1" class="no">
    <h2 onClick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2>
    <ul id="NO10" class="no">
    <li>二级菜单B_0</li>
    <li>二级菜单B_1</li>
    <li>二级菜单B_2</li>
    <li>二级菜单B_3</li>
    <li>二级菜单B_4</li>
    <li>二级菜单B_5</li>
    <li>二级菜单B_6</li>
    <li>二级菜单B_7</li>
    <li>二级菜单B_8</li>
    <li>二级菜单B_9</li>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2>
    <ul id="NO11" class="no">
    <li>二级菜单B_0</li>
    <li>二级菜单B_1</li>
    <li>二级菜单B_2</li>
    <li>二级菜单B_3</li>
    <li>二级菜单B_4</li>
    <li>二级菜单B_5</li>
    <li>二级菜单B_6</li>
    <li>二级菜单B_7</li>
    <li>二级菜单B_8</li>
    <li>二级菜单B_9</li>
    </ul>
    </span>
    <h1 onClick="javascript:ShowMenu(this,'NO2')"> - 三级菜单C</h1>
    <span id="NO2" class="no">
    <h2 onClick="javascript:ShowMenu(this,'NO20')"> - 三级菜单C_1</h2>
    <ul id="NO20" class="no">
    <li>三级菜单C_0</li>
    <li>三级菜单C_1</li>
    <li>三级菜单C_2</li>
    <li>三级菜单C_3</li>
    <li>三级菜单C_4</li>
    <li>三级菜单C_5</li>
    <li>三级菜单C_6</li>
    <li>三级菜单C_7</li>
    <li>三级菜单C_8</li>
    <li>三级菜单C_9</li>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,'NO21')"> - 三级菜单C_2</h2>
    <ul id="NO21" class="no">
    <li>三级菜单C_0</li>
    <li>三级菜单C_1</li>
    <li>三级菜单C_2</li>
    <li>三级菜单C_3</li>
    <li>三级菜单C_4</li>
    <li>三级菜单C_5</li>
    <li>三级菜单C_6</li>
    <li>三级菜单C_7</li>
    <li>三级菜单C_8</li>
    <li>三级菜单C_9</li>
    </ul>
    </span>
    <h1 onClick="javascript:ShowMenu(this,'NO3')"> - 四级菜单D</h1>
    <span id="NO3" class="no">
    <h2 onClick="javascript:ShowMenu(this,'NO30')"> - 四级菜单D_1</h2>
    <ul id="NO30" class="no">
    <li>四级菜单D_0</li>
    <li>四级菜单D_1</li>
    <li>四级菜单D_2</li>
    <li>四级菜单D_3</li>
    <li>四级菜单D_4</li>
    <li>四级菜单D_5</li>
    <li>四级菜单D_6</li>
    <li>四级菜单D_7</li>
    <li>四级菜单D_8</li>
    <li>四级菜单D_9</li>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,'NO31')"> - 四级菜单D_2</h2>
    <ul id="NO31" class="no">
    <li>四级菜单D_0</li>
    <li>四级菜单D_1</li>
    <li>四级菜单D_2</li>
    <li>四级菜单D_3</li>
    <li>四级菜单D_4</li>
    <li>四级菜单D_5</li>
    <li>四级菜单D_6</li>
    <li>四级菜单D_7</li>
    <li>四级菜单D_8</li>
    <li>四级菜单D_9</li>
    </ul>
    </span>
    </div>
    </body>
    </html>