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&g开发者_开发技巧t;
<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>
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/
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.
精彩评论