Drop-down navigation menus
I am having difficulties with drop-down navigation menus. They work beautifully in Firefox, but (of course) they refuse to work properly in IE. Initially the menus wouldn't show up at all in IE, but I managed to fix that by deleting some extra code. (The layout was made in Macromedia Fireworks, which likes to add in extra bits of code, and I don't always catch those right away.) So the menus show up in IE now, but they appear to the right of the navigation image, rather than below, and also don't stay active long enough for anyone to click anything.
These are the function definitions in my HTML header:
Here's the code for the drop-down menus themselves:
The above script was adapted from one I found on w3schools.
The website I'm working on is here.
Oh, I've also got some style definitions in a css file, if the problem might be there?
Any suggestions?
These are the function definitions in my HTML header:
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.vis ibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.vis ibility="hidden";
}
</script>Here's the code for the drop-down menus themselves:
<td onmouseover="showmenu('stories')" onmouseout="hidemenu('stories')"><img src="stories.jpg" width="84" height="35" border="0" alt="stories">
<table class="menu" id="stories" width="100">
<tr><td class="menu"><a href="about.php">students</a></td></tr>
<tr><td class="menu"><a href="about.php">faculty/staff</a></td>< /tr>
<tr><td class="menu"><a href="about.php">alumnae</a></td></tr>
</table>
</td>
<td width="20"></td>
<td onmouseover="showmenu('authors')" onmouseout="hidemenu('authors')"><img src="authors.jpg" width="104" height="35" border="0" alt="authors">
<table class="menu" id="authors" width="100">
<tr><td class="menu"><a href="about.php">students</a></td></tr>
<tr><td class="menu"><a href="about.php">faculty/staff</a></td>< /tr>
<tr><td class="menu"><a href="about.php">alumnae</a></td></tr>
</table>
</td>
<td width="20"></td>
<td onmouseover="showmenu('contribute')" onmouseout="hidemenu('contribute')"><img src="contribute.jpg" width="138" height="35" border="0" alt="contribute">
<table class="menu" id="contribute" width="130">
<tr><td class="menu"><a href="about.php">what's your story?</a></td></tr>
</table>
</td>
<td width="20"></td>
<td onmouseover="showmenu('about')" onmouseout="hidemenu('about')"><img src="about.jpg" width="87" height="35" border="0" alt="about">
<table class="menu" id="about" width="100">
<tr><td class="menu"><a href="about.php">about the project</a></td></tr>
</table>
</td>The above script was adapted from one I found on w3schools.
The website I'm working on is here.
Oh, I've also got some style definitions in a css file, if the problem might be there?
Any suggestions?
