Drop down menu not dropping

Question

I am attempting a simple drop down menu using Javascript but when I hover over my link that should display my drop down menu nothing happens. What do you think is wrong with my Javascript?

Javascript:

function onHover( divID )
    {
        var div = document.getElementByID( divID );

        if (div)
        {
            div.className = "unHidden";
        }
    }

    function onLeave( divID ) 
    {
        var div = document.getElementByID( divID );

        if (div)
        {
            div.className = "hidden";
        }
    }

My css:

.hidden { visibility: hidden; }
.unHidden { visibility: visible; z-index: 30; }

And finally my HTML:

<li>
<a onmouseover="onHover('otherLinks)" onmouseout="onLeave('otherLinks')">Other Links</a>
<div class="hidden" id="otherLinks" onmouseover="onHover('otherLinks)" onmouseout="onLeave('otherLinks')">
    <ul>
    <li><a href="events.html">Events</a></li>
    <li><a href="foodNutrition.html">Food & Nutrition</a></li>
    <li><a href="faq.html">FAQ</a></li>
    </ul>
</div>
</li>

Answer 1

Is there any reason why you're using Javascript for your drop downs and not HTML and CSS?

Son of suckerfish drop downs is a good place to start for a HTML and CSS drop down option: http://htmldog.com/articles/suckerfish/dropdowns/

Answer 2

It is document.getElementById( divID );, note that it is "Id" not "ID". You are also missing a single quote, it should be onmouseover="onHover('otherLinks')". I also agree with Dan's answer.

Answer 3

May be this is the issue: You have passed the div name like

onmouseover="onHover('otherLinks)"

Try to give the div name like

onmouseover="onHover('otherLinks')"

or try java script ddl

Answer 4

You can only use css. Or use the library JQuery.