<ole>
<style type="text/css">
#menu {
width: 140px;
}
#menu div {
color: #000;
background: #ededed;
}
#menu, #menu ul {
font: 12px/1.2em tahoma, arial, sans-serif;
list-style: none;
padding: 0;
margin: 0;
cursor: default;
}
#menu ul {
padding-left: 20px;
display: none;
background: #cccccc;
}
#menu li a, #menu li a:visited {
height: 1.4em;
padding: 1px 5px 0 10px;
display: block;
text-decoration: none;
color: #000;
background: #efefef;
}
#menu li a:hover, #menu li a:active {
text-decoration: none;
color: #f0f0f0;
background: #666666;
}
#menu li a.head, #menu li a.head:visited {
height: 1.4em;
padding: 1px 5px 0 10px;
display: block;
text-decoration: none;
color: #000;
background: #dedede;
}
#menu li a.head:hover, #menu li a.head:active {
text-decoration: none;
color: #f0f0f0;
background: #999999;
}
</style>
<script type="text/JavaScript">
var oActMenu = null;
function toggleItem(e) {
e = e ? e : window.event;
var oSrcElm = e.srcElement ? e.srcElement : e.target;
var oThisSub = oSrcElm.parentNode.getElementsByTagName("ul")[0];
if (oActMenu) {
if (oActMenu==oThisSub) return;
oActMenu.style.display = "none";
}
oActMenu = oThisSub;
var css = oActMenu.style;
css.display = css.display!="block" ? "block" : "none";
oSrcElm.blur();
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
e.cancelBubble = true;
e.returnValue = false;
}
window.onload = function() {
var aHeads = document.getElementById("menu").getElementsByTagName("a");
for (var i=0,j=aHeads.length; i<j; i++) {
if (aHeads[i].className!="head") continue;
if (aHeads[i].attachEvent) aHeads[i].attachEvent("onclick", toggleItem);
else if (aHeads[i].addEventListener) aHeads[i].addEventListener("click", toggleItem, false);
else aHeads[i].onclick = toggleItem;
}
}
</script>
<ul id="menu">
<li><a href="#" class="head">Punkt 1</a>
<ul>
<li><a href="side1_1.html">Punkt 1.1</a></li>
<li><a href="side1_2.html">Punkt 1.2</a></li>
<li><a href="side1_3.html">Punkt 1.3</a></li>
<li><a href="side1_4.html">Punkt 1.4</a></li>
</ul>
</li>
<li><a href="#" class="head">Punkt 2</a>
<ul>
<li><a href="side2_1.html">Punkt 2.1</a></li>
<li><a href="side2_2.html">Punkt 2.2</a></li>
<li><a href="side2_3.html">Punkt 2.3</a></li>
</ul>
</li>
<li><a href="#" class="head">Punkt 3</a>
<ul>
<li><a href="side3_1.html">Punkt 3.1</a></li>
<li><a href="side3_2.html">Punkt 3.2</a></li>
<li><a href="side3_3.html">Punkt 3.3</a></li>
<li><a href="side3_4.html">Punkt 3.4</a></li>
<li><a href="side3_5.html">Punkt 3.5</a></li>
</ul>
</li>
<li><a href="#" class="head">Punkt 4</a>
<ul>
<li><a href="side4_1.html">Punkt 4.1</a></li>
<li><a href="side4_2.html">Punkt 4.2</a></li>
<li><a href="side4_3.html">Punkt 4.3</a></li>
</ul>
</li>
</ul>
/mvh
</bole>
