即興で構築してみたが,このようなものだろうか.
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
<!--
ol
{
margin:0px;
padding:0px;
width:120px;
color:white;
background-color:MidnightBlue;
}
ol ol
{
margin-left:2em;
}
li
{
border:dotted thin black;
}
li a
{
color:white;
}
-->
</style>
<script type="text/javascript">
<!--
function setDropDownList(ol, sChildElementName)
{
sChildElementName = sChildElementName.toLowerCase();
var childs = ol.childNodes;
var child;
var li_childs;
var li_child;
var list_ol;
for(var i=0; i<childs.length; i++)
{
child = childs[i];
if(child.nodeType != 1 || child.nodeName.toLowerCase() != sChildElementName)
continue;
li_childs = child.childNodes;
list_ol = new Array();
for(var j=0; j<li_childs.length; j++)
{
li_child = li_childs[j];
if(li_child.nodeType != 1 || li_child.nodeName.toLowerCase() != ol.nodeName.toLowerCase())
continue;
list_ol.push(li_child);
setDropDownList(li_child, sChildElementName);
}
if(list_ol.length > 0)
setDropDownFunc(child, list_ol);
}
function setDropDownFunc(li, list_ol)
{
for(var i=0; i<list_ol.length; i++)
{
ol = list_ol[i];
ol.style.display = "none";
}
li.onclick = function(event)
{
if(event == null)event = window.event;
var target = (event.target != null)? event.target:event.srcElement;
if(target != this)
return;
var ol;
for(var i=0; i<list_ol.length; i++)
{
ol = list_ol[i];
ol.style.display = (ol.style.display!="none")? "none":"block";
}
};
};
}
function initialize()
{
var ols = document.getElementsByTagName("ol");
for(var i=0; i<ols.length; i++)
setDropDownList(ols[i], "li");
}
//-->
</script>
</head>
<body onload="initialize();">
<ol style="position:absolute;">
<li>壁紙
<ol>
<li>四季の風景
<ol>
<li><a href="#">640X480</a></li>
<li><a href="#">1024X768</a></li>
<li><a href="#">1600X1200</a></li>
</ol>
</li>
<li>深海
<ol>
<li><a href="#">640X480</a></li>
<li><a href="#">1024X768</a></li>
<li><a href="#">1600X1200</a></li>
</ol>
</li>
<li>空と鳥
<ol>
<li><a href="#">640X480</a></li>
<li><a href="#">1024X768</a></li>
<li><a href="#">1600X1200</a></li>
</ol>
</li>
</ol>
</li>
<li>背景サンプル
<ol>
<li>学校
<ol>
<li><a href="#">640X480</a></li>
<li><a href="#">1024X768</a></li>
<li><a href="#">1600X1200</a></li>
</ol>
</li>
<li>教室
<ol>
<li><a href="#">640X480</a></li>
<li><a href="#">1024X768</a></li>
<li><a href="#">1600X1200</a></li>
</ol>
</li>
<li>亜空間
<ol>
<li><a href="#">640X480</a></li>
<li><a href="#">1024X768</a></li>
<li><a href="#">1600X1200</a></li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>
