Tip: you can modify some code before running
<p><meta content="text/html; charset=gb2312" http-equiv="Content-Type" /><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: # 601px 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></p><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<p.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<p.length;i++){h1[i].innerHTML = h1[i].innerHTML.replace("+","-");h1[i].style.color = "";}obj.style.color = "#0000FF";for(var i=0; i</script><div id="menu"><p onClick="javascript:ShowMenu(this,'NO0')">- 一级菜单A</p><p onClick="javascript:ShowMenu(this,'NO00')">- 一级菜单A_1</p><ul class="no" id="NO00"> <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><p onClick="javascript:ShowMenu(this,'NO01')">- 一级菜单A_2</p><ul class="no" id="NO01"> <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><p onClick="javascript:ShowMenu(this,'NO02')">- 一级菜单A_3</p><ul class="no" id="NO02"> <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><p onClick="javascript:ShowMenu(this,'NO03')">- 一级菜单A_4</p><ul class="no" id="NO03"> <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><p onClick="javascript:ShowMenu(this,'NO1')">- 二级菜单B</p><p onClick="javascript:ShowMenu(this,'NO10')">- 二级菜单B_1</p><ul class="no" id="NO10"> <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><p onClick="javascript:ShowMenu(this,'NO11')">- 二级菜单B_2</p><ul class="no" id="NO11"> <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><p onClick="javascript:ShowMenu(this,'NO2')">- 三级菜单C</p><p onClick="javascript:ShowMenu(this,'NO20')">- 三级菜单C_1</p><ul class="no" id="NO20"> <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><p onClick="javascript:ShowMenu(this,'NO21')">- 三级菜单C_2</p><ul class="no" id="NO21"> <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><p onClick="javascript:ShowMenu(this,'NO3')">- 四级菜单D</p><p onClick="javascript:ShowMenu(this,'NO30')">- 四级菜单D_1</p><ul class="no" id="NO30"> <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><p onClick="javascript:ShowMenu(this,'NO31')">- 四级菜单D_2</p><ul class="no" id="NO31"> <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></div>
提示:您可以先修改部分代码再运行