You can actually get a reasonable implementation just using CSS:
Demo Fiddle
HTML
<ul>
<li>
<input tabindex="1" id='menu1' type='Checkbox' />
<label for='menu1'>menu1</label>
<ul>
<li><a>A.A</a>
</li>
<li><a>A.B</a>
</li>
<li><a>A.C</a>
</li>
<li><a>A.D</a>
</li>
</ul>
</li>
<li>
<input tabindex="2" id='menu2' type='Checkbox' />
<label for='menu2'>menu2</label>
<ul>
<li><a>A.A</a>
</li>
<li><a>A.B</a>
</li>
<li><a>A.C</a>
</li>
<li><a>A.D</a>
</li>
</ul>
</li>
</ul>
CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
ul {
list-style:none;
}
ul, li {
margin:0;
padding:0;
}
li {
display:inline-block;
position:relative;
}
body > ul {
background:grey;
}
input[type=checkbox] {
position:relative;
opacity:0;
}
label {
position:relative;
left:-20px;
top:0;
}
ul li > ul {
display:none;
position:absolute;
background:lightgrey;
}
ul li input[type=checkbox]:checked ~ ul {
display:block;
}
ul li ul li {
display:block;
}