Menú desplegable IE Soy nueva por aquí y me he registrado en un acto de desesperación buscando una solución a este maldito problema...jajaja
Desde hace dos meses inicié un blog. Como no tengo ni idea de programación y quería poner un menú desplegable a mi gusto, me he dedicado a copiar códigos que no entiendo y poco a poco he logrado algo decente. El menú va fantástico en Mozilla, Chrome y Safari. El problema es que no se ve en Internet Explorer. Realmente no es que no se vea, sino que se oculta detrás de la imagen de cabecera.
He buscado en Google y parece que es un problema relativamente frecuente. Pero por más que busco soluciones, ninguna me funciona. ¿Podríais ayudarme?
El código del menú es este:
PRIMER PASO: Antes de </head> coloqué esto:
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
jQuery.noConflict();
var arrowimages={down:['downarrowclass', 'http://lh4.googleusercontent.com/_dsEG33PDaHw/TaITwtLndVI/AAAAAAAABT0/mA-q3eyPYVk/Imagemenu-arrow-down.gif', 23], right:['rightarrowclass', 'http://lh3.googleusercontent.com/_dsEG33PDaHw/TaITws3Ww2I/AAAAAAAABT4/Q-8GXxpmSGs/Imagemenu-arrow-right.gif']}
var jqueryslidemenu={
animateduration: {over: 200, out: 100},
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function(jQuery){
var jQuerymainmenu=jQuery("#"+menuid+">ul")
var jQueryheaders=jQuerymainmenu.find("ul").parent()
jQueryheaders.each(function(i){
var jQuerycurobj=jQuery(this)
var jQuerysubul=jQuery(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:jQuerysubul.outerWidth(), subulh:jQuerysubul.outerHeight()}
this.istopheader=jQuerycurobj.parents("ul").length ==1? true : false
jQuerysubul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
jQuerycurobj.children("a:eq(0)").css(this.istophea der? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />')
jQuerycurobj.hover(function(e){
var jQuerytargetul=jQuery(this).children("ul:eq(0)")
this._offsets={left:jQuery(this).offset().left, top:jQuery(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimens ions.subulw>jQuery(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if (jQuerytargetul.queue().length<=1)
jQuerytargetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqu eryslidemenu.animateduration.over)},
function(e){
var
jQuerytargetul=jQuery(this).children("ul:eq(0)")
jQuerytargetul.slideUp(jqueryslidemenu.animatedura tion.out)})})
jQuerymainmenu.find("ul").css({display:'none', visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
//]]>
</script>
SEGUNDO PASO: Antes de ]]></b:skin> coloqué esto:
/* Menú horizontal deslizante
----------------------------------------------- */
.jqueryslidemenu {
z-index: 99;
position: relative;
background: #f6e9c9;
width: 920px;
font-weight: none;
font-size: 14px;
font-family: verdana;
margin-left: -30px;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.jqueryslidemenu ul li {
position: relative;
display: inline;
float: left;
}
.jqueryslidemenu ul li a {
display: block;
background: #f6e9c9; /* Color de las pestañas */
padding: 8px 10px;
border-right: 1px solid #999999; /* Color del borde que separa las pestañas */
text-decoration: none;
}
* html .jqueryslidemenu ul li a {
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
color: #000000; /* Color del texto */
font-weight:bold;
}
.jqueryslidemenu ul li a:hover {
background: #d8cf71; /* Color de la pestaña al pasar el cursor */
color: #000000; /* Color del texto al pasar el cursor */
}
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li ul li {
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li ul {
top: 0;
}
.jqueryslidemenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /* Ancho de las subpestañas */
padding: 3px;
margin: 3px;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.downarrowclass{
position: absolute;
top: 15px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 11px;
right: 8px;
}
TERCER PASO: Añadí un gagdet HTML con los distintos subapartados
<div class="jqueryslidemenu" id="myslidemenu">
<ul>
<li><a href="http://viveverdeynatural.blogspot.com.es/">INICIO</a></li>
<li><a href="http://viveverdeynatural.blogspot.com.es/p/bienvenidoa-este-sitio-mi-nombre-es_18.html">PRESENTACIÓN</a></li>
<li><a href="http://viveverdeynatural.blogspot.com.es/search/label/Cuidarse%20por%20fuera">CUIDARSE POR FUERA</a>
<ul>
<li><a href="http://viveverdeynatural.blogspot.com.es/search/label/Rostro">ROSTRO</a>
<ul>
<li><a href="http://viveverdeynatural.blogspot.com.es/search/label/Cuidados%20b%C3%A1sicos%20rostro">Cuidados básicos</a></li>
<li><a href="http://viveverdeynatural.blogspot.com.es/search/label/Hidratantes%20rostro">Hidratantes</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<br style='clear: left'/>
</div>
Muchísimas gracias de antemano, ¡de verdad!
