Development Javascript: Two level horizontal tabs menu

Hi. I'm trying to make a tabs menu that supports a second horizontal level when the mouse rolls over one of the tabs, using tutorials and other examples. I've got the majority of it working, just has a few bugs and I want it to automatically select a default tab.

Main Tabs:

Code:

<div id="mainmenu" class="float-break">
<ul>
		<li id="main-1"><a  onmouseover="switchMenues(1);" href="link"><span>tab1</span></a></li>
		<li id="main-2"><a  onmouseover="switchMenues(2);"><span>tab2</span></a></li>
		<li id="main-3"><a  onmouseover="switchMenues(3);"><span>tab3</span></a></li>
		<li id="main-4"><a  onmouseover="switchMenues(4);"><span>tab4</span></a></li>
		<li id="main-5"><a  onmouseover="switchMenues(5);"><span>tab5</span></a></li>
		<li id="main-6"><a  onmouseover="switchMenues(6);"><span>tab6</span></a></li>
		<li id="main-7"><a  onmouseover="switchMenues(7);" href="link"><span>tab7</span></a></li>
</ul>
</div>

Sub Tabs:

Code:

<div id="submenu" class="float-break">
<script type="text/javascript">
<!--
var subOne 		= 	'<ul id="sub-1" class="sub hide float-break">	<li><a>main1:Sub1</a></li>	<li><a>main1:Sub2</a></li>	</ul>';
var subTwo 		= 	'<ul id="sub-2" class="sub hide float-break">	<li><a>main2:Sub1</a></li>		</ul>';
var subThree 	= 	'<ul id="sub-3" class="sub hide float-break">	<li><a>main3:Sub1</a></li>		</ul>';
var subFour 	= 	'<ul id="sub-4" class="sub hide float-break">	<li><a>main4:Sub1</a></li>		</ul>';	
var subFive 	= 	'<ul id="sub-5" class="sub hide float-break">	<li><a>main5:Sub1</a></li>		</ul>';					
var subSix 		= 	'<ul id="sub-6" class="sub hide float-break">	<li><a>main6:Sub1</a></li>		</ul>';
var subSeven 	= 	'<ul id="sub-7" class="sub hide float-break">	<li><a>main7:Sub1</a></li>		</ul>';
var mainTabs 	= 	['main-1', 'main-2', 'main-3', 'main-4', 'main-5', 'main-6', 'main-7'];
var subMenus 	=	['sub-1', 'sub-2', 'sub-3', 'sub-4', 'sub-5', 'sub-6', 'sub-7'];
document.write( subOne, subTwo, subThree, subFour, subFive, subSix, subSeven );
-->
</script>
</div>

javascript:

Code:

function switchMenues(menuNumber)
{
    for ( i = 1; i < mainTabs.length; i++ ) { document.getElementById(mainTabs[i]).className = ''; }
    if ( menuNumber != 0 ) document.getElementById(mainTabs[menuNumber]).className = tabHighlightClass;
    for ( i = 0; i < subMenus.length; i++ ) { document.getElementById(subMenus[i]).style.display = 'none'; }
    document.getElementById(subMenus[menuNumber]).style.display = 'block';
}

However it doesnt work unless I add an additional '' to the "var mainTabs" and an additional sub category to "var subMenus " for example:

Code:

var mainTabs 	= 	['', 'main-1', 'main-2', 'main-3', 'main-4', 'main-5', 'main-6', 'main-7'];
var subMenus 	=	['sub-1', 'sub-1', 'sub-2', 'sub-3', 'sub-4', 'sub-5', 'sub-6', 'sub-7'];

then works but is a little messy and I dont understand why.

Finally if you could tell me how to select the Main-1 tab by default that would be great.

Thanks v.much!!
Kingdavies

 

You're calling mainTabs in a loop that starts at 1 and arrays start at 0