Js Trial and error

1

I’m new to javascript and am experimenting with a vertical menu that displays sub menus when you hover your mouse over the parent menu.

I used one of the DW templates and changed the code to try to make it work (I don’t learn too well from books)

I’ve got the basics to work but there’s a problem which I haven’t been able to rectify yet. When the page loads, the sub-menus are displayed until the whole page is loaded and then only does it disappear. What I want is for the menus to remain hidden until the mouse hovers over it.

Here’s the page and here’s the relevant bits of code:


<script language="JavaScript" type="text/javascript">
//---------------  menu stuff  ----------------------
window.onload=show;  
function show(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';}
}
//---------------  end menu stuff  ----------------------
</script>

and the menu bits


<td width="165"><dt onmouseover="javascript:show('smenu1');"><a href="#" class="navText">home</a></dt></td>
          
        </tr>
        <tr>
          <td width="165">
          
          <dl id="navText">
        <dt onmouseover="javascript:show('smenu2');"><a href="#" class="navText">some photos</a></dt>
            <dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show();">
                <ul>
                    <li><a href="steerman.html" class="navText">Steerman</a></li>
                    <li><a href="harvard.html" class="navText">Harvard</a></li>
                    <li><a href="fury.html" class="navText">Fury</a></li>
                    <li><a href="on_display.html" class="navText">On Display</a></li>
                    <li><a href="helos.html" class="navText">Helos</a></li>
                    <li><a href="before_and_after.html" class="navText">Before and After</a></li>
                    <li><a href="navy.html" class="navText">Navy</a></li>
                </ul>
            </dd>    
        </dl>
        </tr>
        <tr>
          <td width="165"><dt onmouseover="javascript:show('smenu3');"><a href="movieclip.html" class="navText">a movie clip </a></dt></td>