Hola a todos y muchas gracias de antemano por cualquier ayuda que pueda recibir desde aquí…. Soy nuevo de por aquí así que este es mi primer post. <== DESCRIPCION ==>
El tema es el siguiente. Tengo un menú echo con css que es desplegable en la horizontal solo con css. Luego le he metido el jquery para poder hacer con que se despliegue con un efecto similar al slideDown y slideUp de jquery, pero he sido obligado a utilizar un animate en vez de slideDown y slideUp por el problema de que al pasar el ratón por encima del menú repetidas veces y rápidamente este se desplegaba una y otra vez, o sea, todas las veces que he entrado y salido con el ratón, no fijando todas las opciones del menú aunque le dejara el ratón por encima de las opciones del menú.
<== EL PROBLEMA ==>
Ahora, no lo se si de la manera mas adecuada o no, he conseguido con que se vea bien tanto en safari como en firefox, pero en ie7 y ie8 no se despliega por completo solo enseña la primera opción del menú y no todas como en los demás navegadores…….
<== OBS ==>
Una observación yo voy a postular el código del menú que se vera un poco raro si lo intentáis visualizar porque le faltara las imágenes.
Código PHP:
<style type="text/css">
/*el reset*/
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, ul, li, form, label,
center, b{margin: 0;padding: 0;border: 0;outline: 0;font-weight: normal;font-style: normal;font-size: 100%;font-family: "Arial", "Helvetica", sans-serif;vertical-align: baseline}
body {line-height: 1; color: black; background: #474E55; font-size: 62.5%; width:100%; height:100%;}
:focus {outline: 0;}
input{margin: 0;padding: 0}
ul, li, a{list-style-type: none; text-decoration:none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/*el menu*/
#menu_cont{height:5em;}
#menu{width:74em; height:4em; float:left; padding:0.5em 0; position:relative;}
.menu_border{width:2em; height:5em; float:left; background: url(images/mbackgrside.png);}
#mborder_left{background-position:left;}
#mborder_right{background-position:right;}
#m_center{height:4em; padding:0 2em; background: url(images/mbackgr.png) center;}
#m_center ul li.top, #m_center ul li.sub{float:left;
margin:0 0.5em 0 0.5em;position:relative; z-index:1}
#m_center ul li.top a, #m_center ul li.sub a{height:3.9em;
float:left; padding:0 0 0 1.5em; background: url(images/menu_btn.png) no-repeat left -4em;
line-height:3.9em; text-align:center; color:#FFF; cursor:pointer;}
#m_center ul li.top a b, #m_center ul li.sub a b{height:2.9em;
float:left; padding:1em 1.5em 0 0; font-weight:300;
background: url(images/menu_btn.png) no-repeat right -4em;}
#m_center ul li.top a:hover, #m_center ul li.sub a:hover{background-position:left 0%; color:#FFF5EE;}
#m_center ul li.top a:hover b, #m_center ul li.sub a:hover b {height:3.9em;
padding-top:0; background-position:right 0%;}
#m_center ul li.sub ul.sub{display:none;}
#m_center ul li.sub:hover ul.sub{ margin-top:4em; left:0px; display:block;position:absolute;}
#m_center ul li.sub:hover ul.sub li:hover{opacity:1;}
#m_center ul li.sub ul.sub li a.sub{width:16em; height:2.5em;
float:left; padding:0 0.5em; background:#666; color:#CCC;
line-height:2.5em;text-align:left; font-size:1.1em; border:0.1em silver solid; opacity:0.9;}
#m_center ul li.sub ul.sub li a.sub:hover{background:#CCC;
color:#333; border:0.1em #999 solid; opacity:1;}
</style>
Código PHP:
<script type="text/javascript">
$(document).ready(function(){
$("a.sub").css({height:'0em', border:'0em', display:'none'});
$("li.sub").hover(
function () {
$(this).children().children().find("a.sub").stop(true)
.animate({height:'2.5em', border:'0.1em silver solid', display:'block'}, 1000);
},
function () {
$(this).find("ul.sub")
.css({width:'10em', margin:'4em 0 0 0', left:'0px', display:'block',position:'absolute'});
$(this).children().children().find("a.sub").stop(true)
.animate({height:'0em', border:'0em'}, 1000, function(){
$(this).css({display:'none'}, function(){
$(this).parents().find("ul.sub").css({display:'none'});
})
});
}
);
});
</script>
Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<title>Menu css + jquery</title>
</head>
<body>
<div id="menu_cont">
<div id="mborder_left" class="menu_border"> </div>
<div id="menu">
<div id="m_center">
<ul>
<li class="top"><a href="#" title="Pagina inicial"><b>Inicio</b></a></li>
<li class="top"><a href="#" title="Lo mas visto"><b>Lo.mas.visto</b></a></li>
<li class="sub"><a href="#" title="Noticias"><b>Noticias</b></a>
<ul class="sub">
<li><a class="sub" href="#" title="">Categoria1</a></li>
<li><a class="sub" href="#" title="">Categoria2</a></li>
<li><a class="sub" href="#" title="">Categoria3</a></li>
<li><a class="sub" href="#" title="">Categoria4</a></li>
<li><a class="sub" href="#" title="">Categoria5</a></li>
<li><a class="sub" href="#" title="">Categoria6</a></li>
</ul>
</li>
<li class="sub"><a class="top" href="#" title="Tutoriales"><b>Tutoriales</b></a>
<ul class="sub">
<li><a class="sub" href="#" title="">Categoria1</a></li>
<li><a class="sub" href="#" title="">Categoria2</a></li>
<li><a class="sub" href="#" title="">Categoria3</a></li>
</ul>
</li>
<li class="top"><a href="#" title="Registro gratuito"><b>Registro</b></a></li>
<li class="top"><a href="#" title="¿Quiénes somos?"><b>¿Quiénes.somos?</b></a></li>
<li class="top"><a href="#" title="Contactanos"><b>Contáctanos</b></a></li>
<li class="top"><a href="#" title="Ayuda del sitio"><b>Ayuda</b></a></li>
</ul>
</div>
</div>
<div id="mborder_right" class="menu_border"> </div>
</div>
</body>
</html>