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>

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>

• javascript
• html
• css
• drop-down-menu

• Does it display properly when you do not set the class as "hidden" for the "otherLinks" div tag? I would also try leaving out the onmouseover and onmouseout functions from the "otherLinks" div tag while you troubleshoot this issue. – eapen Commented Feb 24, 2011 at 5:07
• Do any of the answers help @Mack? – Dan Commented Feb 27, 2011 at 9:00

4 Answers 4

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./articles/suckerfish/dropdowns/

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.

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

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