menu desplegable

[DiamanteCosmico]

hola a todos..
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!!

[caricatos]

Tema movido desde Ajax

No se ve interacción con el servidor, así que no se trata de un tema Ajax... y evidentemente es un problema de la librería.

Saludos

[mayid]

Yo aprendí que en jquery es mejor no mezclar css y metodos jquery cuando se trata de mostrar / ocultar:

Entonces, cambiaría esto:
$("#ulMenu ul ").css({display: "none"});

por esto:
$("#ulMenu ul ").hide();

Y luego también modificaría esta línea:
$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);

[juaniquillo]

Ese problema me ha pasado varias veces con este tipo de menu, aunque no esté usando javascript. neesitas darle un ancho al ul interior, por ejemplo:

Código css:

#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;
   width:120px; /* <----------- aqui aplico el ancho */
}
 

También apoyo lo que dice mayid. También prefiero usar clases como addClass(), removeClass() y toggleClass() para cambiar la apariencia usando clases que ya existan en tu hoja css. Para menos código yo lo hice así:

Código javascript:

$(document).ready(function(){
    //oculto los submenus
    $(" #ulMenu ul ").hide();
    
    //hago el hover
    $(" #ulMenu li").hover(function(){
        $(this).find('ul:first:hidden').slideDown(400);
    },function(){
        $(this).find('ul:first').slideUp(400);
    });
    
});