Dropdown Menü erweitern

[dansch]

Hallo,
ich kenne mich mit JS nicht besonders gut aus, will aber ein Dropdown Menü haben da meine Navigation mittlerweile sehr umfangreich geworden ist. Nach langem suchen habe ich nun eine Vorlage im Internet gefunden.
Dieser Code funktioniert einwandfrei. Jedoch möchte ich nun eine dritte Ebene einbauen (im HTML kein Problem) aber in den anderen Bereichen JS und CSS bin ich überfordert ich denke jeodch das es nur an JS liegt weis es aber nicht.

Hier ist der Code. Ich hoffe Ihr könnt mir helfen. (aber bitte Idiotensicher :()

<ul class="menu">  
    <li ><a href="#">Ebene1 Punkt1</a></li>  
    <li onmouseover="show(this)" onmouseout="hide(this)" ><a href="#">Ebene1 Punkt2</a>
      <ul class="submenu" onmouseover="show(this)" onmouseout="hide(this)" > 
             <li><a href="#">Ebene2 Punkt1</a></li>    
             <li><a href="#">Ebene2 Punkt2</a></li>   
                     <ul class="subsubmenu" onmouseover="show(this)" onmouseout="hide(this)">    
                           <li><a href="#">Ebene3 Punkt1</a></li> 
                           <li><a href="#">Ebene3 Punkt2</a>    
                      </ul>      
              </li>   
              <li class="active"><a href="#">Ebene2 Punkt3</a></li>   
       </ul> 
   </li>  
   <li><a href="#">Ebene1 Punkt3</a></li>  
   <li><a href="#">Ebene1 Punkt4</a></li>
</ul>

<script type="text/javascript">
    //<![CDATA[
  function show(element){
           element.className += "hover";
   }
 function hide(element){
           element.className = element.className = "";
     }
    //]]>
</script>

ul.menu, ul.menu ul {
    list-style-type: none;
}
 
ul.menu a {
    display: block;
    padding: 3px 10px 3px 10px;
    font-weight:normal;
}
 
ul.menu ul a {
    padding: 0 10px;
}
 
ul.menu li {
    padding:0;
    margin:0;
    background-image: none;
    background-color: #FFF9E4;
    float:left;
    border:1px solid #26383D;
}
 
ul.menu ul {
    margin-left:0;
    padding: 0 0 5px 0;
    position: absolute;
    background-color: #26383D;
    border:1px solid #FFF9E4;
    display:none;
    min-width:180px;
}
 
/* IE-Hack für die Breite */
*html ul.menu ul {
    width:180px;
}
 
/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
/* über der Liste  befindet (.hover siehe JavaScript oben) */
ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul  {
    display:block;
}
 
ul.menu ul li {
    float:none;
    background-color: transparent;
}

 

[KurtKabine]

Hast du das Problem lösen können?
Wenn nein, hast du mir mal den Code der gesammten Seite? Dann schau ich ihn mir mal genau an und vielleicht lässt sich ja was machen...