pues tengo el siguiente codigo:
HTML
Código HTML :
<div id="menu"> <ul id="ulMenu"> <li>Link1</li> <li>Link2</li> <li>Link3</li> <li>Galeria <ul class="submenu"> <li>Video</li> <li>Imagenes</li> </ul> </li> </ul> </div> <!-- fin de #menu-->
CSS
Código HTML :
#menu {
background: #000;
height:30px;
width: 500px;
margin: 0 auto;
padding-left:70px;
}
#ulMenu {
margin: 0px auto;
padding-top:0px;
list-style:none;
}
#ulMenu li {
float:left;
}
#ulMenu li{
display:block;
padding:7px 10px;
text-decoration:none;
color:#CCCCCC;
font-weight:bold;
cursor: pointer;
position:relative;
}
#ulMenu li:hover {
color:#FFFFFF;
}
/* Submenu */
#ulMenu ul.submenu {
margin-left:0px;
margin-top:0px;
padding: 0px;
border:1px solid #000000;
position:absolute;
left:0;
top:30px;
list-style:none;
background-color:#333333;
}
#ulMenu ul.submenu li {
display: block;
float:none;
left: 0px;
text-align: left;
background-image:none;
border-top:1px solid #999999;
border-bottom:1px solid #999999;
width:100px;
}
Código HTML :
<script language="javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript">
function mainmenu(){
// Oculto los submenus
$(" #ulMenu ul ").css({display: "none"});
// Defino que submenus deben estar visibles cuando se pasa el mouse por encima
$(" #ulMenu li").hover(function(){
$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
},function(){
$(this).find('ul:first').slideUp(400);
});
}
$(document).ready(function(){
mainmenu();
});
</script>
con Firefox y Opera no hay problema, IE7 al salir del submenu hace un efecto medio raroo.....pero el problema que tengo es que no despliega el submenu con safari 3.2
Como le hago para que funcione en Safari.
Muchas gracias de antemano....
saludos!!
