menu javascript esterno

Salve a tutti,
sono nuova di questo forum e avrei bisogno di un'aiuto!dovrei creare un menu che comprenda un sottomenu che si aprirà lateralmente al testo...il codice c'è solo che ho la necessità di renderlo esterno al codice html. lo posto:
<div class="menu">
<ul>
<li><a href="#" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3');blendoff('tabcontent4');swichtabs('1');" onclick="return false;" title="" class="tabactive" id="tablink1">Home </a>
</li>

<li><a href="#" onmouseover="blendon('tabcontent2'); blendoff('tabcontent1'); blendoff('tabcontent3');blendoff('tabcontent4');swichtabs('2');" onclick="return false;" title="" id="tablink2">E </a></li>

<li><a href="#" onmouseover="blendon('tabcontent3'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent4');swichtabs('3');" onclick="return false;" title=""id="tablink3">Es </a>

</li>

<li><a href="#" onmouseover="blendon('tabcontent4'); blendoff('tabcontent1'); blendoff('tabcontent2');blendoff('tabcontent3');swichtabs('4');" onclick="return false;" title=""id="tablink4" >Us </a>
</li>
</ul>
</div>
<div id="ColnSinistra">
<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
<p>Home</p>

</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div style="display:none;" id="tabcontent2">
<p>Est</p>
<ul>
<li><a href=..html">Il confronto</a></li>

<li><a href="Este">Este</a></li>
</ul>
</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div style="display" id="tabcontent3">
<p>Estet</p>
<ul>
<li><a href="DimensioneEstetica.html">Dima</a></li>
<li><a href="..html">Grafica del Sito</a></li>

<li><a href="..html">Interfaccia Grafica</a></li>
</ul>

</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div style="display:none;" id="tabcontent4">
<p>Us</p>
<ul>
<li><a href="...html">Cenni storici sull'Usabilità</a></li>
<li><a href="Defi.html">Defin</a></li>

<li><a href="...html">Principi fondamentali usabilità</a></li>

<li><a href="...html">Principi di Nielsen</a></li>
<li><a href="Normat.html">Normat/a></li>
</ul>
</div>
</div>







function blendoff(idname) {document.getElementById(idname).style.display = 'none';}
function blendon(idname) {document.getElementById(idname).style.display = 'block';}




/*Function for our Tabmenu with 4 Tabs*/
function swichtabs(wert) {
if (wert=='1'){
document.getElementById('tablink1').className='tab1 tabactive';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
}else if (wert=='2'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2 tabactive';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
}else if (wert=='3'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3 tabactive';
document.getElementById('tablink4').className='tab4';
} else if (wert=='4'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4 tabactive';
}
}

Aiutatemi per favore non riesco a trovare una soluzione!!!!