Problema menu vertical hacia abajo y trancision de opacidad

[rapstreet]

el problema que tengo es que tengo un menu desplegable hacia abajo hecho con css y en mi pagina tengo una capa con transicion que pasa de menos opacidad a mas opacidad. el problema es que cuando despliego el menu este se sobrepone a la capa y cuando quiero elegir una opcion del menu que esta por encima de la capa el menu desaparece. no se si me entienden. ni si quiera se como resolverlo.


les dejo el codigo de mi menu

echo '<div id="menu">
<ul>
<li class="nivel1"><a href="index.php" class="nivel1">Inicio</a></li>
<li class="nivel1"><a href="#" class="nivel1">Futbol</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opci?n 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="historiadelfutbol.php">Historia</a></li>
<li><a href="historiareglasdejuego.php">Historia del Reglamento</a></li>
<li><a href="reglasdejuego.php">Reglas de Juego</a></li>
<li><a href="videoreglasdejuego.php">Video Reglas</a></li>
<li><a href="aclaraciones.php">Aclaraciones de las Reglas</a></li>
<li><a href="aclaracionesarbitraje.php">Aclaraciones Arbitraje</a></li>
<li><a href="manualinformes.php">Manual de Informes</a></li>
<li><a href="modeloinforme.php">Modelo de Informes</a></li>
</ul>
</div>

el codigo del estilo del menu

#menu { text-align: center;
font-size: 17px;
width: 820px;
margin: 20px auto;
font-family:"neord";
opacity:0.95;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
border: solid 1px #fff;
padding: 8px;
position: relative;
background: #b4ddb4; /* Old browsers */
background: -moz-linear-gradient(top, #b4ddb4 0%, #83c783 15%, #52b152 38%, #008a00 72%, #005700 89%, #002400 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(15%,#83c783), color-stop(38%,#52b152), color-stop(72%,#008a00), color-stop(89%,#005700), color-stop(99%,#002400)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b4ddb4 0%,#83c783 15%,#52b152 38%,#008a00 72%,#005700 89%,#002400 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b4ddb4 0%,#83c783 15%,#52b152 38%,#008a00 72%,#005700 89%,#002400 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b4ddb4 0%,#83c783 15%,#52b152 38%,#008a00 72%,#005700 89%,#002400 99%); /* IE10+ */
background: linear-gradient(top, #b4ddb4 0%,#83c783 15%,#52b152 38%,#008a00 72%,#005700 89%,#002400 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 3px;
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius: 3px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomleft: 40px;
border-radius: 3px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;

}
#menu ul li:hover {position: relative;

}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
background: rgb(197,222,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(197,222,234,1)), color-stop(31%,rgba(138,187,215,1)), color-stop(100%,rgba(6,109,171,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;

}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;

}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
background: rgb(197,222,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(197,222,234,1)), color-stop(31%,rgba(138,187,215,1)), color-stop(100%,rgba(6,109,171,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */

}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

y el codigo de la capa que les dije

#scrap {
margin: 10px;
border: solid 1px #000;
border-radius: 1px 25px;
-moz-border-radius: 1px 25px;
-webkit-border-radius: 1px 25px;
-o-border-radius: 1px 25px;
box-shadow: 3px 3px 10px black;
-moz-box-shadow: 3px 3px 10px black;
-webkit-box-shadow: 3px 3px 10px black;
-o-box-shadow: 3px 3px 10px black;
padding: 10px 10px 10px 100px;
opacity: 0.5;
font-size:9px;
transition: opacity .3s ease-out, box-shadow: .3s ease-out;
-moz-transition: opacity .3s ease-out, -moz-box-shadow: .3s ease-out;
-webkit-transition: opacity .3s ease-out, -webkit-box-shadow: .3s ease-out;
-o-transition: opacity .3s ease-out, -o-box-shadow: .3s ease-out;
-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 50px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 50px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
}

#scrap:hover{
opacity: 1;
font-size:14px;
transition: opacity .3s ease-in, box-shadow: .3s ease-in;
-o-transition: opacity .3s ease-in, -o-box-shadow: .3s ease-in;
-moz-transition: opacity .3s ease-in, -moz-box-shadow: .3s ease-in;
-webkit-transition: opacity .3s ease-in, -webkit-box-shadow: .3s ease-in;
-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 50px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
border-radius: 50px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
position:relative;
}