Drop down menu

The problem is: I made a drop down menu and now the menu that drops down is transparent and I can't click on anything in it because it disapears when I move my mouse. I think it inherited the transparency of my divbox, but it only happens in firefox (it works fine in explorer) and I don't know what to do. Here's the html-code:
<html>
<head>
<link href="rock-css2.css" rel="stylesheet" type="text/css" />
<title>Rockweb.nl</title>
</head>
<h1>
<table summary="hoofdtabel" style="border: 3px solid #4d4d4d;" cellspacing="0" cellpadding="0">
<tr>
<td><div class="yo"><a href="rock-html.html"></a></div></td>
</tr>
<tr>
<td width="672px">
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="nav">

<li><div class="yo2"><a href="algemeen-html.html"></a></div>
<ul>
<li><a href="algemeen-html.html">Geschiedenis</a></li>
<li><a href="algemeen-html.html">Instrumenten</a></li>
<li><a href="algemeen-html.html">Zang</a></li>
</ul>
</li>

<li><div class="yo3"><a href="bands-html.html"></a></div>
<ul>
<li><div class="yo7"><a href="bands-html.html"></a></div></li>
<li><a href="bands-html.html">Metallica</a></li>
<li><a href="bands-html.html">Guns 'n Roses</a></li>
<li><a href="bands-html.html">3 Days Grace</a></li>
</ul>
</li>

</ul>
</td>
</tr>
<tr>
<td><div class="transbox"><p><h1>Algemeen</h1><br>
<h2>Hier kunt u algemene informatie vinden over rockmuziek, zoals de geschiedenis en ontwikkeling ervan, veelgebruikte instrumenten en nog veel meer.</h2></div></p></td>
</tr>
</table>

And here's the css-code:

body {
background-image: url(achtergrond%20bruikbaar.jpg);
background-attachment: fixed;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
font-family: verdana, arial;
color: #000000;
margin-top: 0px;
}
p {
font-size: 14px;
}

table{
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: 35px;
color: #000000;
text-align: center;
float: center;
font-family: arial;
}

h2 {
font-size: 14px;
color: #000000;
text-align: left;
margin-left: 30px;
margin-right: 30px;
font-family: arial;
font-style: bold;
}
h3 {
width: 200px;
color: #000000;
text-align: left;
font-family: times new roman;
font-style: italic
}
h4 {
font-size: 25px;
color: #000000;
background: #ffffff;
text-align: center;
font-family: arial;
}
ul {
font-style: bold;
font-size: 12px;
color: #000000;
list-style: square;
margin-left: 150px;
}
.gewoon{
font-size: 12px;
color: #000000;
font-family: verdana;
float: left;
}
.gewoon2{
font-size: 12px;
color: #000000;
font-family: times new roman;
margin-left: 150px
}

.yo1 a {
display: block;
width: 112px;
height: 50px;
background: transparent url(Home1.png) no-repeat;
}

.yo1 a:hover {
background: transparent url(Home1hover.png)
}

.yo2 a {
display: block;
width: 112px;
height: 50px;
background: transparent url(Algemeen1.png) no-repeat;
}

.yo2 a:hover {
background: transparent url(Algemeen1hover.png)
}

.yo3 a {
display: block;
width: 112px;
height: 50px;
background: transparent url(Bands1.png) no-repeat;
}

.yo3 a:hover {
background: transparent url(Bands1hover.png)
}

.yo4 a {
display: block;
width: 112px;
height: 50px;
background: transparent url(Subgenres1.png) no-repeat;
}

.yo4 a:hover {
background: transparent url(Subgenres1hover.png)
}

.yo5 a {
display: block;
width: 112px;
height: 50px;
background: transparent url(Radio1.png) no-repeat;
}

.yo5 a:hover {
background: transparent url(Radio1hover.png)
}

.yo6 a {
display: block;
width: 112px;
height: 50px;
background: transparent url(Clips1.png) no-repeat;
}

.yo6 a:hover {
background: transparent url(Clips1hover.png)
}

.yo a {
display: block;
width: 672px;
height: 96px;
background: transparent url(Hetlogonegatiefgoeiegrootte2.bmp) no-repeat;
}

.yo a:hover {
background-position: 0px 0;
}

.yo7 a {
display: block;
width: 112px;
height: 50px;
background: transparent url(Linkin%20park1.bmp) no-repeat;
}

.yo7 a:hover {
background: transparent url(Linkin%20park2.bmp)
}

h7{
background-image: url(transparantbox.bmp);
}

div.transbox
{
width:672px;
height:1000px;
margin:0px 0px;
background-color:#ffffff;
border:1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
postition: relative;
}
div.transbox p
{
position:relative;
margin:40px 50px;
margin-left: 30px;
font-weight:bold;
color:#000000;
}

div img{
position:relative;
/* CSS3 standard */
opacity:1.0;
/* for Mozilla */
-moz-opacity:1.0;
/* for IE */
filter:alpha(opacity=100);
}

#nav, #nav ul {
padding: 0px;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: 112px;
}

#nav ul {
position: absolute;
width: 112px;
left: -1000px;
}

#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}

#nav a {
display: block;
margin: 0px 0px 0px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

ul a{
font-weight: bold;
color: #F60;
cursor: default;
}

ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #CCC;
cursor: pointer;
}

ul li{
background-color: #CCC;
border-left: 0px solid #cccccc;
}

ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #FFF;
cursor: pointer;
}

ul ul li{
background-color: #666;
border-top: 0px solid #cccccc;
border-left: 0;
}

/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 0px solid #cccccc;
}

* html ul ul li{
border-top: 0px solid #cccccc;
}
/* Einde IE only hack */

I'm noob, so don't be surprised if I got things in the codes that are totally unnecesary or wrong, also my English isn't really good, so I'm sorry if I spelled things a bit wrong.

Drop down menu

Some1hulovesanime

limbo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week