JavaScript - Locking Menu Bars

<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
  <ul>
    <li><a href="2-1.php">Cani</a>
        <ul>
          <li><a href="2-1-1.php">Domestic dogs</a></li>
          <li><a href="2-1-2.php">Wolves</a></li>
        </ul>
    </li>
    <li><a href="2-2.php">Felidae</a>
        <ul>
          <li><a href="2-2-1.php">Domestic cats</a></li>
          <li><a href="2-2-2.php">Wild cats</a></li>
        </ul>
    </li>
  </ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>

div#s1 {
width: 200px;          /* menu width */
}

div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0;             /* no padding */
margin:0;              /* no margin for IE either */
}

div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}

div#s1 ul li a {
display: block;         /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px;           /* hint for IE, alternatively remove whitespace from HTML */
}

div#s1 ul ul li a {
margin-left: 20px;     /* indent level 1 */
}

div#s1 ul ul ul li a {
margin-left: 40px;     /* indent level 2 */
}

div#s1 ul ul ul ul li a {
margin-left: 60px;     /* indent level 3 */
}

div#s1 li ul, div#s1 li.open li.closed ul {
display: none;         /* collapse */
}

div#s1 li.open ul {
display: block;        /* expand */
}

div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}

div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}

div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}

div#s1 li.active a {
background-position: 0px -20px;
color: red;            /* highlight text */
}

div#s1 li.active li a {
background-position: 0px 0px;
color: white;          /* fix lower levels */
}

div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}

var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";

//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;

//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
 var url = location.href;
 if (url.lastIndexOf("/") == (url.length-1)) {
   url = url+menu_default_page;
 }
 if (url.lastIndexOf("?") >= 0) {
   url = url.substring(0, url.lastIndexOf("?"));
 }
 if (url.lastIndexOf("#") >= 0) {
   url = url.substring(0, url.lastIndexOf("#"));
 }
 menu_url = url;

 var main = document.getElementById(menu_id);
 if (!main) alert("No element with id '"+ menu_id +"' found");
 menu_traverse(main);
 }

 /* Walks down the subtree and on the way back
 sets properties.
 returns bit set
         1: set = element is a node, unset = element is a leaf
         2: set = element contains the active node
         4: set = element is the active A node
*/
function menu_traverse(element) {
var props  = 0;

// walk down
for (var i=0; i<element.childNodes.length; i++) {
  var child = element.childNodes[i];
  props |= menu_traverse(child); // aggregate bits
}

// on the way back now
switch (element.tagName) {
  case "UL":
    props |= 1;
    break;

  case "LI":
    var c1 = (props & 1) ? 
               ((props & (2|4)) ? menu_open_class : menu_closed_class)
             : menu_leaf_class; 
    element.className = element.className ? element.className+" "+c1 : c1;
    if (props & 4) {
      if (!(props & 2)) element.className += " "+menu_active_class;
      props |= 2;
      props &= 1 | 2; // reset bit 4
    }
    break;

  case "A":
    if (props & 2) break; // once is enough
    var href = element.getAttribute("href");
    if (menu_isSameUrl(menu_url, href)) props |= 4;
    break;
  }

  return props;
}

//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
  if (b[j] == "..") { j-=2; continue; }
  if (a[i] == "..") { i-=2; continue; }
  if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
  if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
  if (! (a[i] == b[j])) return false;
  i--;
  j--;
 }
 return true;
}

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/buttons/teamandcorpsports.jpg','images/buttons/performancesports.jpg','images/buttons/flagsandbanners.jpg','images/buttons/home.jpg','images/buttons/catalogues.jpg','images/buttons/galleries.jpg','images/buttons/designown.jpg','images/buttons/dealerlogin.jpg','images/buttons/contactus.jpg','images/buttons/dealersignup.jpg')">

<div id="wrapper">
<div id="header">
<h1>&nbsp;</h1>
</div>


<!-- Main content -->
<div id="content">
<div style="text-align:center">
       <img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
   </div>

   <script type="text/javascript" src="slideshow.js"></script>
</div>




<!-- Site navigation menu -->
<div id="navcontainer">
<ul>
<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('teamandcorpsports1','','images/buttons/teamandcorpsports.jpg',1)"><img src="images/buttons/teamandcorpsports1.jpg" alt="Team and Corporate Sports" name="teamandcorpsports1" width="224" height="37" border="0" id="teamandcorpsports1" /></a></li>

<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('performancesports1','','images/buttons/performancesports.jpg',1)"><img src="images/buttons/performancesports1.jpg" alt="Performance Sports" name="performancesports1" width="224" height="37" border="0" id="performancesports1" /></a></li>

/* navigation menu */
#navcontainer ul {
margin: 0;
padding: 0; 
list-style-type: none; /* removes bullets */
background-image:url('background.jpg');
}

#navcontainer li {
margin: 0 0 0 0; /* separates list items */
}

#navcontainer a
{
display: block; /* achieves rollover */

width: 250px; /* list width */

text-decoration: none;

}

function printHTMLTop()
{
var html = '<div class="main" id="main"> \
<div class="header" id="header">\
<div class="topHeader" name="topHeader"> \
<div class="logo" name="logo"><a href="index.php"><img src="logoBlue02.png" /></a></div> \
&nbsp; \
</div> \
<div class="midHeader" name="midHeader"><img src="midHeadImg.png" /></div> \
<div class="bottomHeader" name="bottomHeader"> \
<div class="menu" name="menu"><a href="index.php"><img name="hem" id="hem" src="menu_HemW.png" onmouseover="document.hem.src=\'menu_HemB.png\'" onmouseout="document.hem.src=\'menu_HemW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Contract.php"><img name="skapa" src="menu_SkapakontraktW.png" onmouseover="document.skapa.src=\'menu_SkapakontraktB.png\'" onmouseout="document.skapa.src=\'menu_SkapakontraktW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="gbookAdd.php"><img name="gbook" src="menu_GbookW.png" onmouseover="document.gbook.src=\'menu_GbookB.png\'" onmouseout="document.gbook.src=\'menu_GbookW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Forskning.html"><img name="forskning" src="menu_ForskningW.png" onmouseover="document.forskning.src=\'menu_ForskningB.png\'" onmouseout="document.forskning.src=\'menu_ForskningW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Intervjuer.html"><img name="intervju" src="menu_IntervjuerW.png" onmouseover="document.intervju.src=\'menu_IntervjuerB.png\'" onmouseout="document.intervju.src=\'menu_IntervjuerW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Ungdom.html"><img name="ungdom" src="menu_UngdomW.png" onmouseover="document.ungdom.src=\'menu_UngdomB.png\'" onmouseout="document.ungdom.src=\'menu_UngdomW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Lankar.html"><img name="lank" src="menu_LankarW.png" onmouseover="this.src=\'menu_LankarB.png\'" onmouseout="this.src=\'menu_LankarW.png\'" /></a></div> \
</div> \
</div> \
<div class="mid" id="mid">';

document.write(html);
}

<body> 
<h1>Menu Test</h1> 
<ul id=”menu”> 
  <li class=”menu”><a href=”#”>Home</a></li> 
  <li class=”menu”><a href=”#”>Products</a>
     <ul>
        <li><a href=”#”>Sub-item 1</a></li> 
        <li><a href=”#”>Sub-item 2</a></li> 
        <li><a href=”#”>Item 3</a></li>
     </ul></li>
   <li class=”menu”><a href=”#”>Support</a> 
       <ul>
          <li><a href=”#”>Sub-item 1</a></li>
          <li><a href=”#”>Sub-item 2</a></li> 
       </ul></li> 
   <li class=”menu”><a href=”#”>Employment</a>
        <ul> 
           <li><a href=”#”>Sub-item 1</a></li> 
           <li><a href=”#”>Sub-item 2</a></li>
        </ul></li>
           <li class=”menu”><a href=”#”>Contact Us</a>
        <ul>
           <li><a href=”#”>Sub-item 1</a></li>
           <li><a href=”#”>Sub-item 2</a></li> 
        </ul></li> 
</ul> 
</body>

// global variables for timeout and for current menu 
var t=false,current; 

function SetupMenu() {
  if (!document.getElementsByTagName) return;
  items=document.getElementsByTagName(“li”); 

  for (i=0; i<items.length; i++) {
    if (items[i].className != “menu”) continue; 
    //set up event handlers 
    thelink=findChild(items[i],”A”); 
    thelink.onmouseover=ShowMenu; 
    thelink.onmouseout=StartTimer;
    //is there a submenu? 
    if (ul=findChild(items[i],”UL”)) {
      ul.style.display=”none”; 
      for (j=0; j<ul.childNodes.length; j++) {
         ul.childNodes[j].onmouseover=ResetTimer; 
         ul.childNodes[j].onmouseout=StartTimer;
      }
    }
  }
} 

// find the first child object of a particular type 
function findChild(obj,tag) {
  cn = obj.childNodes; 
  for (k=0; k<cn.length; k++) {
    if (cn[k].nodeName==tag) return cn[k]; 
  }
  return false;
}