He diseñado una pagina web haciendo uso de CSS para el posisionamiento de los elementos (div) pero sucede que he diseñado un menu desplegable con solo CSS y en la parte inferior de este menu e puesto un div que contiene un banner (swf) que he hecho en flash y mi problema es que los submenus que se despliegan quedan por detras del banner.
Ya he intetado con la propiedad Z-Indez en los submenus y nada
si alguien sabe como solucionar ese problema me puede escribir a
[email protected] o simplemente responder aca
Gracias de antemano
Fragmento del Codigo Html
<!--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>
Codigo CSS
#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;
}