Hi,

I have a navMenu of which some items should open & close straight down, onclick. Because of that straight down opening, I thought it would be semantic enough if I would not put those items in a sub menu, but leave them in the main menu.

But although I do not get any error or even just a warning in IE9 (with debugger) and FF7 (Firebug 1.8.4), the subLevel items won't open or close.

The code contains quite a lot of seemingly irrelevant matters, but this way you will have nicer menu to play with . And it is a one-action copy & paste code.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#menuContainer {
    width: 148px;
    position: absolute;
    top: 120px;
    bottom: 10px;
    }
#menuDiv {
    width: 108px;
    position: relative; 
    left: 21px;
    margin-top: 20px;
    }
#menuDiv ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
#menuDiv li {
    border: 1px solid #555;
    border-top: 0;
    white-space: nowrap;
    text-align: left;
    }
#menuDiv li#firstKid {
    border-top: 1px solid #666;
    }
#menuDiv li a {
    display: block;
    padding: 3px;
    font: normal 12px/18px Verdana; /* without line-height gaps in IE6 */
    color: #000;
    text-decoration: none;
    background-color:  #60b0b0;
    }
#menuDiv li a:hover {
    background-color: #000;
    color: #fff;
    }
#menuDiv a#hasSubLevel {
    background: #60b0b0 url(images/vakje_plus.gif) no-repeat 95% 63%;
    }
#menuDiv a#hasSubLevel:hover {
    background-color: #999;
    color: #000;
    }
#menuDiv li.subLevel {
    display: none;
    }
#menuDiv li.subLevel a {
    background-color: #ffff99;
    color: #000;
    }
#menuDiv li.subLevel a:hover {
    color: #fff;
    background: #000;
    }
#menuDiv li a.newWindow {
    background: #60b0b0 url('images/newWindow3.gif') no-repeat 95% 50%;
    }
#menuDiv li.subLevel a.newWindow {
    background: #ffff99 url('images/newWindow3.gif') no-repeat 95% 50%;
    }
#menuDiv li a.newWindow:hover, #menuDiv li.subLevel a.newWindow:hover {
    background: #000 url('images/newWindow3Neg.gif') no-repeat 95% 50%;
    color: white;
    }
</style>

<script type="text/javascript">
document.getElementsByClassName = function(cl)
{
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = this.getElementsByTagName('*');
    for (var i=0; i<elem.length; i++)
    {
        var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
    }
        return retnode;
}
</script>
<script type="text/javascript">
function openSubLevel()
{
    var parent = document.getElementById('hasSubLevel');
    var children = document.getElementsByClassName('subLevel');
    for (var c=0; c<children.length; c++)
    {
        if (children[c].style.display == 'none')
        {
            children[c].style.display = 'block';
            parent.style.backgroundImage = 'url(images/vakje_min.gif)';
        }
        else return;
    }
}

function closeSubLevel()
{
    var parent = document.getElementById('hasSubLevel');
    var children = document.getElementsByClassName('subLevel');
    for (var n=0; n<children.length; n++)
    {
        if (children[n].style.display == 'block')
        {
            children[n].style.display = 'none';
            parent.style.backgroundImage = 'url(images/vakje_plus.gif)';
        }
        else return;
    }
}
</script>

</head>
<body>
        <div id="menuDiv">
            <ul>
                <li id="firstKid"><a href="#" onclick="closeSubLevel()">Introductie</a></li>
                <li><a href="#" onclick="closeSubLevel()">Kwaliteitseisen</a></li>
                <li><a href="#" onclick="closeSubLevel()">Zelf updaten</a></li>
                <li><a href="#" onclick="closeSubLevel()">Showcase</a></li>
                <li><a href="#" onclick="closeSubLevel()">Bedrijfsinfo</a></li>
                <li><a href="#" id="hasSubLevel" onclick="openSubLevel();">Werkwijze</a></li>
                <!-- begin subLevel -->
                    <li class="subLevel"><a href="layouts-overzicht.html" class="newWindow" target="_blank">Lay-outs</a></li>
                    <li class="subLevel"><a href="stylingmodule.php" class="newWindow" target="_blank">Styling</a></li>
                    <li class="subLevel"><a href="lettertypen.html">Lettertypen</a></li>
                    <li class="subLevel"><a href="fototips.html">Fototips</a></li>
                <!-- end subLevel -->
                <li><a href="#" class="newWindow" target="_blank">Mobiel</a></li>
            </ul>
        </div>
</body>
</html>
Thanks in advance.