Primo messaggio in questo fantastico forum che mi ha sempre aiutato nei momenti di difficoltà

Allora vi descrivo brevemente il mio problema, sono un neofita di javascript, per lo più utilizzo codice già pronto e al limite modifico qualche valore, ora sto realizzando un menù, vi posto il codice

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>lab</title>
<style>
@charset "utf-8";
/* CSS Document */
body {
	margin: 0;
	padding:50px 0 0 0;
	;
	height: 99.5%;
	width: 99.5%;
	font-family: Arial;
	text-align: left;
}
div#container {
	width:870;
	height:600;
	margin:0 0 0 20px;
}
div#menu {
	width:200px;
	height:300;
	font-size: 7pt;
	letter-spacing:1px;
}
div#lineamenutop {
	height:1px;
	width:110px;
	background:#000000;
	margin:0 0 0 0;
}
div#lineamenu {
	height:1px;
	width:110px;
	background:#000000;
	margin:0 0 27px 0;
}
#sub1 {
	cursor: pointer;
	padding-left:110px;
}
#sub2 {
	cursor: pointer;
	padding-left:110px;
}
#sub3 {
	cursor: pointer;
	padding-left:110px;
}
div#menutitle1 {
	cursor: pointer;
	position:relative;
}
div#menutitle2 {
	cursor: pointer;
	margin:27px 0 0 0;
	position:relative;
}
div#menutitle3 {
	cursor: pointer;
	margin:27px 0 0 0;
	position:relative;
}
</style>
<script type="text/javascript">

function moveX(obj, pos){
if(document.getElementById){
var elem = document.getElementById(obj);
elem.style.left = pos + "px";
}
}



if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("menu").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
</head>
<body >
<div id="container">
  <div id="menu">
    <div id="menutitle1" onclick="SwitchMenu('sub1'); moveX('menutitle1','110');return false">TITOLO 1</div>
    <div id="lineamenutop"></div>
    <span class="submenu" id="sub1"> <u> Submenu 

    SubmenuSubmenu 

    SubmenuSubmenuSubmenu 

    </u></span>
    <div id="menutitle2" onclick="SwitchMenu('sub2'); moveX('menutitle2','110');return false">TITOLO 2</div>
    <div id="lineamenutop"></div>
    <span class="submenu" id="sub2"> <u> Submenu 

    GSubmenu 

    Submenu 

    </u></span>
    <div id="menutitle3" onclick="SwitchMenu('sub3'); moveX('menutitle3','110');return false">TITOLO 3</div>
    <div id="lineamenutop"></div>
    <span class="submenu" id="sub3"> <u> Submenu 

    Submenu 

    Submenu 

    </u></span> </div>
</div>
</div>
</body>
</html>
Il problema è questo, quando clicco sul primo titolo questo si sposta sulla destra e sotto compaiono le voci del submenu, quando clicco sulla seconda voce il primo submenù scompare e compare il submenu relativo ma la voce del primo titolo rimane sempre a destra. Cosa devo inserire nel Javascript par far ritornare in posizione iniziale i diversi titoli?

Spero di essere stato chiaro [scusate se ho occupato troppo spazio con il codice non ho capito come fare la finestrella con lo scroll]