Problem with javascript menu rollovers

Hello all –

I am new to using JS in WP and figure this is probably an easy fix.

I have a wordpress self-hosted site. I am doing a nav bar with rollovers. I have the script saved as a js file and in the right directory. I have the

<script src="<?php bloginfo('template_directory'); ?>/js/menu.js" type="text/javascript"></script>

calling the JS in the header.php file just after the body tag. I have the styles where I want them in the CSS file. And lastly I have the html and the appropriate wp_list_pages call in the right spot.

The css is working fine, which leads me to believe my css and html are spot on. But there is no rollover working. Do I need to put anything besides styling into my css file?

Any help is much appreciated.

Thanks.

Script and HTML below:

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: https://www.dynamicdrive.com/style/

var menuids=["vertmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initvertmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initvertmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initvertmenu)

</script>

HTML in my sidebar.php page:

<div class="vertmenu">
<ul id="vertmenu1">
<?php wp_list_pages('title_li=&depth=4&exclude=9&sort_column=menu_order'); ?>
</ul></div>