<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {
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>
<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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</ul>
</span>
</div>
</body>
</html>