Encontre un codigo de un menu desplegable en google y no me anda cuando esta trasparente:
Código HTML:
<style type="text/css"> <!-- ul#menu-h { margin: 0; border: 0 none; padding: 0; width: 500px; /*For KHTML*/ list-style: none; height: 24px; } ul#menu-h li { margin: 0; border: 0 none; padding: 0; float: left; /*For Gecko*/ display: inline; list-style: none; position: relative; height: 24px; } ul#menu-h ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 24px; left: 0; } ul#menu-h ul:after /*From IE 7 lack of compliance*/{ clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#menu-h ul li { width: 160px; float: left; /*For IE 7 lack of compliance*/ display: block !important; display: inline; /*For IE*/ } ul#menu-h a { padding: 0 6px; float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; color: #FFFFFF; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 24px; font-weight: bold; } ul#menu-h a:hover { color: #FFFFFF; text-decoration: none; background-color: #003366; background-image: url(images/menu/extend.jpg); background-repeat: repeat-x; } ul#menu-h li:hover a, ul#menu-h li.iehover a{ color: #FFFFFF; text-decoration: none; background-color: #003366; } ul#menu-h li.iehover li a { float: none; color: #000000; background-color: #003366; background-repeat: repeat-x; background-position: left; } ul#menu-h li:hover li a{ float: none; color: #FFFFFF; background-color: #003366; background-repeat: repeat-x; background-position: left; } ul#menu-h li:hover li a:hover, ul#menu-h li:hover li:hover a, ul#menu-h li.iehover li a:hover, ul#menu-h li.iehover li.iehover a { color: #FFFFFF; text-decoration: none; background-color: #305CA7; background-image: url(images/menu/extend.jpg); } ul#menu-h li:hover li:hover li a, ul#menu-h li.iehover li.iehover li a { background: #004993; color: #FFFFFF; } ul#menu-h li:hover li:hover li a:hover, ul#menu-h li:hover li:hover li:hover a, ul#menu-h li.iehover li.iehover li a:hover, ul#menu-h li.iehover li.iehover li.iehover a { background: #305CA7; color: #FFFFFF; background-image: url(images/menu/li_act.jpg); background-repeat: repeat-x; background-position: left; } ul#menu-h li:hover li:hover li:hover li a, ul#menu-h li.iehover li.iehover li.iehover li a { background: #004993; color: #ffffff; } ul#menu-h li:hover li:hover li:hover li a:hover, ul#menu-h li.iehover li.iehover li.iehover li a:hover { color: #FFFFFF; background-color: #003366; background-image: url(images/menu/li_act.jpg); background-repeat: repeat-x; background-position: left; } ul#menu-h ul ul, ul#menu-h ul ul ul { display: none; position: absolute; top: 0; left: 160px; } ul#menu-h li li, ul#menu-h li li li{ filter:Alpha(opacity=90,finishopacity=90,style=1); } ul#menu-h li:hover ul ul, ul#menu-h li:hover ul ul ul, ul#menu-h li.iehover ul ul, ul#menu-h li.iehover ul ul ul { display: none; } ul#menu-h li:hover ul, ul#menu-h ul li:hover ul, ul#menu-h ul ul li:hover ul, ul#menu-h li.iehover ul, ul#menu-h ul li.iehover ul, ul#menu-h ul ul li.iehover ul { display: block; } --> </style><script> navHover = function() { var lis = document.getElementById("menu-h").getElementsByTagName("LI"); for (var i=0; i<lis.length; i++) { lis[i].onmouseover=function() { this.className+=" iehover"; } lis[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", navHover); </script><ul id="menu-h"> <li><a href="#">Inicio</a></li> <li><a href="#">Mi cuenta ▼</a> <ul> <li><a href="#">Registrarse</a></li> <li><a href="#">Logearse »</a> <ul> <li><a href="#">Olvide mi clave</a></li> </ul> </li> </ul> </li> <li><a href="#">Contacto</a></li> </ul>
Gracias
Salu2
