Hi everyone, I'm creating a menu for a website I'm building. When you mouseover one of the boxes, a sub-menu appears beneath it. Everything looks right, but when you roll your mouse over it, nothing happens.
Main page:
<html>
<head>
<link rel="stylesheet" href="menu.css" type="text/css">
<title></title>
</head>
<body>
<span class="Tab" onMouseOver="MakeVisible('Menu')"<Menu</span>
<span class="Tab" onMouseOver="MakeVisible('Games')">Games</span>
<span class="Tab" onMouseOver="MakeVisible('Animations')">Animations</span>
<span class="Tab" onMouseOver="MakeVisible('Forum')">Forum</span>
<span class="Tab" onMouseOver="MakeVisible('Meet The Staff')">Meet The Staff</span>
<span class="Tab" onMouseOver="MakeVisible('Rate Our Website')">Rate Our Website</span>
<span class="Tab" onMouseOver="MakeVisible('Website Statistics')">Website Statistics</span>
<div id="Menu" class="Links">
<a href="menu.html" target="Main">Main Page</a>
</div>
<div id="Games" class="Links">
<a href="games.html" target="Main">Main Page</a>
<a href="games.html#ping_pong" target="Main">Ping Pong</a>
</div>
<div id="Animations" class="Links">
<a href="animations.html" target="Main">Main Page</a>
<a href="animations.html#jack" target="Main">Jack</a>
</div>
<div id="Forum" class="Links">
<a href="forum.html" target="Main">Main Page</a>
</div>
<div id="Meet The Staff" class="Links">
<a href="bio.html" target="Main">Main Page</a>
<a href="bio_metroid12.html" target="Main">Metroid 12</a>
<a href="bio_darthyassen.html" target="Main">Darth Yassen</a>
<a href="bio_alfalfa.html" target="Main">Alfalfa</a>
<a href="bio_pandaman.html" target="Main">Panda Man</a>
</div>
<div id="Rate Our Website" class="Links">
<a href="rating.html" target="Main">Main Page</a>
</div>
<div id="Website Statistics" class="Links">
<a href="stat.html" target="Main">Main Page</a>
</div>
<script type="text/javascript">
function MakeVisible(tab, element){
var links = document.getElementsByTagName("div")
for (var j = 0; j <tabs.length; j++){
if (links[j].className == 'Links') links[j].style.display = "none"
}
var element = document.getElementById(element)
element.style.display = "block"
}
</script>
</body>
</html>
The style sheet:
.Tab{
font-weight: bold;
padding: 5px;
border-style: solid;
border-width: 1px;
}
body{
font-family: Veranda, sans-serif;
}
.Links{
display: none;
border-width: 1px;
border-style: solid;
padding: 10px;
background-color: lightyellow;
font-size: x-small;
}
You can see it at http://www.freewebs.com/blubswebsite/side%5Fmenu.html
