Paste code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>Aufgabe 3</title>
  <style type="text/css">
   body{
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    margin:0 auto;
    /*text-align: center;*/
   }
   
   #tree1{
    display:block;
    list-style: none;
    width:150px;
   }
   
   #tree1 li{
    cursor: pointer;
    width:auto;
   }
  
   #tree1 .treeInner{
    display:none;
   }
  </style>
  [removed]
   function treeAction(innerNo){
    if(document.getElementById("inner"+innerNo).style.display != "block"){
     document.getElementById("inner"+innerNo).style.display = "block";
    }else{
     document.getElementById("inner"+innerNo).style.display = "none";
    }
   }
   
   function makeTreeMenu(){
    var treeValues = new Array();
    
    for(var i=0; i<=10; i++){
     treeValues[i] = "Punkt "+i;
    }
    
    
    document.getElementById("arrTree1").appendChild("li")
   }
  [removed]
 </head>
 <body>
   <ul id"arrTree1">
   
   </ul>
   <hrt />
   <ul id="tree1">
    <li><span><b>Punkt 1</b></span>
     <ul class="treeInner" id="inner1">
      <li><span>Hier mehr Unterpunkte!</span>
       <ul class="treeInner" id="inner11">
        <li>Unterunterpunkt</li>
       </ul>
      </li>
      <li>Unterpunkt2</li>
     </ul>
    </li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li><span><b>Punkt 4</span></b>
     <ul  class="treeInner" id="inner2">
      <li><a href="#">Unterpunkt 1</a></li>
      <li>Unterpunkt 2</li>
     </ul>
    </li>
    <li>Punkt 5</li>
   </ul>
 </body>
</html>