Problema con Menu desplegable CSS y flash insertado

<!--Menu -->
<div id="menu">
<ul class="menu">
<li>Home</li>
<li>Quienes Somos</li>
<li>Productos
<ul>
<li>Software</li>
<li>Diseño Gráfico</li>
</ul>
</li>
</ul>
</div>
<!--Flash-->
<div class="grafica">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','555','heigh t','100','title','BannerH','src','Banners/BannerH','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','Banners/BannerH' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="555" height="100" title="BannerH">
<param name="movie" value="Banners/BannerH.swf" />
<param name="quality" value="high" />
<embed src="Banners/BannerH.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="555" height="100"></embed>
</object>
</noscript>
</div>

#menu {
float:left;
width:760px;
display: block;
margin:0px;
}

ul.menu {
margin:0px 0px 0px 20px;
font-size:12px;
font-weight: bolder;
color: #000000;
list-style:none;
padding: 3px 0px 6px 0px;
}
ul.menu a{
color: #000000
}
ul.menu a:hover{
color: #FF8000
}

ul.menu li{
display:inline;
position:relative;
padding-right:10px;
padding-top: 4px;
padding-bottom: 4px;
padding-left:10px;
}
ul.menu li:hover{
color: #FF8000;
}
ul.menu ul {
display:none;
list-style:none;
position:absolute;
left:0px;
top: 22px;
background: #EBEBEB;
padding:0px;
width: 150px;
color:#000000;
z-index:+100;
}
ul.menu ul li{
display:block;
}
ul.menu ul li:hover{
display:block;
background: #FFE7CE;
color:#000000;
}

ul.menu li:hover > ul
{
display:block;
}
ul.menu ul ul{
display:none;
list-style:none;
position:absolute;
left:150px;
top: 0px;
background: #E9E9E9;
padding:0px;
width: 200px;
color:#000000;
border-left:#FFDCB9 solid 2px;
}
ul.menu ul ul li:hover{
display:block;
background: #F8F8F8;
}

.grafica {
margin: 0px 0px 0px 5px;
background: #333333 url(Images/banner.jpg) no-repeat left top;
float:left;
}

Google está poblado de soluciones para ese mismo problema.

[...] La verdad es que no encontre la ayuda en el link qeu me ofrecio Rizome [...]
Se trataba de [...] esta linea
<param name="wmode" value="transparent" />

[...] esto se soluciona poniendo w-mode="opaque" en el embed y en un
parametro del objeto

[...] wmode="transparent" seems to work.
I tested it in IE7, Safari ,Netscape 9, AOL browser, and Firefox and it seems
to work on all (on Windows).

Los diferentes modos
A partir de la versión 6 del reproductor, Macromedia (ahora Adobe) introdujo lo que se le conoce como el wmode, este parámetro le dice al reproductor de que forma pintar el contenido de la película, existen tres modos.

Window es el modo por default, utilizando este modo el reproductor optimiza el dibujado, lamentablemente con este modo seleccionado la animación siempre esta sobre todos los demás objetos del sitio.
Opaque permite el manejo de la propiedad z-index, pasando el control del dibujado al explorador, de esta manera es posible poner elementos sobre las animación flash.
Transparent permite poner transparente el fondo de la película, y a su vez nos permite manipular la pila del orden, se recomienda utilizar el modo anterior a este si no es necesario poner transparencia al fondo de la animación.