Toggle menu disappears

Okay, I need some help. I have tried the solutions found here but so far, none have seemed to fit. Can someone please help me with keeping a sidenav submenu dropdown appearing once the mouse leaves the parent menu item so I can hover to select the link. At the moment it just disappears ?

The .js file I have is as follows:

window.onload = initAll;

function initAll() {
var allLinks = document.getElementsByTagName("a");

for (var i=0; i<allLinks.length; i++) {
    if (allLinks[i].className.indexOf("sidenav_sub_popdown") > -1) {
        allLinks[i].onclick = retFalse;                     
        allLinks[i].onmouseover = toggleMenu;
    }
}
}

function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);

document.getElementById(thisMenuName).style.display = "block";      

this.parentNode.className = thisMenuName;       
this.parentNode.onmouseout = toggleDivOff;      
this.parentNode.onmouseover = toggleDivOn;      
}

function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}

function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}

function retFalse() {
return false;
}

The html I have is:

                <div class="sidenav">

                <menu>
                    <ul>
                    <li><a href="about_us_company.php" title="Company Information" ><h2>Company Information </h2></a></li>
                    <li><a href="about_us_vision.php" title="Our Vision" ><h2>Our Vision </h2></a></li>
                    <li><a href="about_us_team.php" title="Our Team" class="sidenav_sub_popdown"><h2>Our Team </h2></a></li>
                        <ul id="about_us_team">
                        <li><a href="about_us_steve.php" title="Steve Malcolm" ><h4>&#187 Steve Malcolm </h4></a></li>
                        <li><a href="about_us_anita.php" title="Anita Malcolm" ><h4>&#187 Anita Malcolm </h4></a></li>
                        <li><a href="about_us_dave.php" title="David Stanley" ><h4>&#187 David Stanley </h4></a></li>
                        <li><a href="about_us_ian.php" title="Ian Wallace" ><h4>&#187 Ian Wallace </h4></a></li>
                        <li><a href="about_us_terence.php" title="Terence Price" ><h4>&#187 Terence Price </h4></a></li>
                        <li><a href="about_us_michael.php" title="Michael Malcolm" ><h4>&#187 Michael Malcolm </h4></a></li>
                        <li><a href="about_us_kristy.php" title="Kristy Beer" ><h4>&#187 Kristy Beer </h4></a></li>
                        <li><a href="about_us_natalie.php" title="Natalie Kay" ><h4>&#187 Natalie Kay </h4></a></li>
                        <li><a href="about_us_sarah.php" title="Sarah Reed" ><h4>&#187 Sarah Reed </h4></a></li><br /> 
                        </ul>
                    <li><a href="about_us_qualifications.php" title="Qualifications" ><h2>开发者_如何学编程Qualifications </h2></a></li>
                    <li><a href="about_us_partners.php" title="Industry Partners" ><h2>Industry Partners </h2></a></li>
                    </ul>
                </menu>

Trusting this is enough information. Thanks :) Laura

First of all, you should be using the <nav> element instead of the <menu>. <menu> is to be used for a list of commands and is an interactive element and more likely to be used exclusively in Web Applications.

Secondly, your submenu should be inside the <li> element like so:

<li><a href="..."><h2>Our Team</h2></a>
  <ul id="about_us_team">
    <li><a href="..." ><h4>Steve Malcolm</h4></a></li>
    <li><a href="..."><h4>Anita Malcolm</h4></a></li>
  </ul>
</li>

And finally, if I understand your question corectly, instead of using JavaScript, you should be looking to CSS.

So remove your JavaScript and place this in your CSS file and it should work:

.sidenav ul ul {
   display:none;
}
.sidenav ul li:hover ul {
   display:block;
}