Has probado lo que quiero como tu me lo has dicho ??
No me funciona aun....
Le he agregado lo que dices en una clase llamada .transparente sigue funcionando en FF y no en IE8. Miralo y pruebalo.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
</head>
<script language="JavaScript" type="text/javascript" src="images/menu_desp/menu_scr.js">
</script>
<style>
<!--
body {
background:url(http://i1.tinypic.com/6o101ol.jpg);
}
ul.menu
{
list-style:none;
}
ul.menu a
{ color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
ul.menu li
{
position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
width:70px;
color:#FFF;
background:#C00;
}
ul.menu ul
{
position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
left:30px; /* Para que no monte sobre el <li> */
top:-1px;
display:none;
list-style:none;
}
ul.menu li:hover > ul
{
display:block;
}
ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
position:absolute;
left:-41px;
top:19px;
display:none;
list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
display:inline;
}
.transparente {
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
}
-->
</style>
</head>
<body>
<div class="transparente">
<ul class="menu">
<li><a href="#">Enlace1</a></li>
<li><a href="#">Enlace2</a></li>
<li><a href="#">Enlace3</a>
<ul>
<li><a href="#">Enlace 3.1</a></li>
<li><a href="#">Enlace 3.2</a>
<ul>
<li><a href="#">Enlace 3.2.1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Enlace4</a></li>
</ul></div>
</body>
</html> Gracias.