2 level tab menu display

[PixelPaul]

I'm working on a tab menu that has secondary level links. An example is here: http://pixelmagicdesign.com/working/menuTest.html

When a page is displayed with the selected tab, it needs to display the sub menu options, but I need to hide them if another tab if moused over so the sub menu links do not display over the top of the current links. Does anyone know how this can be done? Thanks in advance.

[bosko]

In line 40 you are missing id attribute, so that's why link2 is always on. Add
<ul id="smenu2">

[PixelPaul]

I want the sub-links to display on this page, but then disappear and the show the sub links when I mouse over the other tabs. If I add the id attribute, the links will display only on mouseover. Anyone else have any ideas how to achieve this?

[MikeFoster]

Here's a suggestion based on bosko's idea. Let all the smenus have IDs. Then something like this:

window.onload=montre;
var thisPgTab = 'smenu2'; // use some way of indicating the tab for this page
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
else document.getElementById(thisPgTab).style.display = 'block';
}

And then in each "tab" LI add the onmouseout handler:

<li class="first" onmouseover="montre('smenu1');" onmouseout="montre()"><a href="#">Link 1</a>

[MikeFoster]

Btw... you've got a nice site going there. I like your design

[PixelPaul]

Thanks for your help and your kind words. Your fix works beautifully!