在无限级下拉菜单中怎样根据选择的菜单改变 页面中的文字

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>无标题文档 </title> 
 
</head> <body>
<div id="aaa">
<ul>
<li>AAAAAAAAA</li>
<li>BBBBBBBBB</li>
<li>CCCCCCCCC</li>
<li>DDDDDDDDD</li>
<li>EEEEEEEEE</li>
<li>FFFFFFFFF</li>
</ul>
</div>
<script type="text/javascript"> 
var Li = document.getElementsByTagName("li")
for(var i=0;i<Li.length;i++)
{
Li[i].onclick = function(){document.getElementById("bbb").innerHTML = this.innerHTML}
}
</script>
<div id="bbb" style="background:#CCCCCC; width:200px; height:200px"></div>
</body> 
</html>