I have been working at this for far too long and I'm having no luck sorting out my menu issues. Please HELP !
Below I will paste the code. I went through numerous tutorials and have attempted to make use of two functions (provided on-line through W3Cschools tutorials.) I have a working drop down menu, but my sliding menu is not working.
"My AU" is supposed to be hidden behind "Current Students" and it is supposed to fly out onMouseOver.
Can somebody out there help me make sense of this, my eyes are bugging out.
<html>
<title>Drop Down/ Slide Menu</title>
<head>
<style>
body{Constantia, Trebuchet MS, Arial, Helvetica, sans-serif;}
table{font-size:18px; background:#3a2f29;}
a{color:#FFF;text-decoration:none;font:bold}
a:hover{color:#7385DB;}
td.menu{background:#3a2f29;}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
var i=-135;
var intHide;
var speed=3;
function showSlide()
{
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hideSlide()
{
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
function show()
{
if (i<-12)
{
i=i+speed;
document.getElementById('slideH').style.left=i;
}
}
function hide()
{
if (i>-135)
{
i=i-speed;
document.getElementById('slideH').style.left=i;
}
}
</script>
</head>
<body>
<h3>Horizontal Menu with Sliding Menu</h3>
<table width="300">
<tr bgcolor="#3a2f29">
<td onMouseOver="showmenu('community')" onMouseOut="hidemenu('community')">
<a href="#">SCIS Community</a><br />
<table class="menu" id="community" width="200">
<tr> <td class="menu"><a href="#">Prospective Students</a> </td></tr>
<tr> <td class="menu"><a href="#">Current Students </a>
<table id="slideH" class="nav" width="150" onMouseOver="showSlide(myau)" onMouseOut="hideSlide(myau)">
<tr> <td class="menu" id="myau"><a href="#"> My AU </a> </td> </tr> </table>
</td></tr>
<tr><td class="menu" ><a href="#">Our People</a></td></tr>
</table>
</td>
<td onMouseOver="showmenu('contact')" onMouseOut="hidemenu('contact')">
<a href="#">Contact </a><br />
<table class="menu" id="contact" width="120">
</table>
</td>
</tr>
</table>
<p>"MY AU" is supposed to be hidden and slide out from behind "Current Students"</p>
</body>
</html>