Veras he probado tu código y si pudieras postular también el css seria mas fácil.
De mientras te dejo esto... Ha ver si he entendido tu problema.... Porque de esta forma al hacer click en $(#ser) se despliegan las otras opciones, pero al hacer click en una de las otras opciones todas vuelven a desaparecer....
Código HTML :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Se queda abierto pero se cierra con cualquier click</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#este").hide();
$("#ser").click(function (){
$("#este").slideToggle("slow");
});
});
</script>
</head>
<body>
<li id="ser"><a href="#">Servicios</a>
<ul id="este">
<li><a href="#">Cotizar</a></li>
<li><a href="#">Basico</a></li>
</ul>
</li>
</body>
</html>
Pero si esto es justamente lo que tu no quieres que pase según lo he entendido. Lo que quieres es que al hacer click en alguna de las opciones del menú este siga abierto y que solo cuando se haga click en el $("#ser") este vuelva a cerrar tendrías que hacer algo como esto....
Código HTML :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Se queda abierto y solo se cierra si vuelves a cilckar arriba</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.este").hide();
$("#ser").find("a.top").click(function (){
$("ul.este").slideToggle("slow", function(){
$(this).children().find("a").click(function(){
$(this).parents("ul").css({display:'block'});
});
});
});
});
</script>
</head>
<body>
<li id="ser"><a class="top" href="#">Servicios</a>
<ul class="este">
<li><a href="#">Cotizar</a></li>
<li><a href="#">Basico</a></li>
</ul>
</li>
</body>
</html>
