Eso es porque si tenés una estructura así:
Cuando hacés click en alguna "Opcion Opcion", técnicamente también estás haciendo click en "Opcion principal" pues este contiene a todas las "Opciones Opciones" dentro. ¿Comprende?
Lo que yo haría es utilizar <a> para envolver las opciones (además de que ayuda a simplificar una solución para tu problema, creo que también ayuda a la usabilidad de tu sitio). Entonces el HTML se vería así:
Código HTML:
Ver original<li style="list-style: url(style/img/home.png);"> <li style="list-style: url(style/img/cat.png);"> <a href="#">CATEGORIAS
</a> <li><a href="http://www.google.com">HTML
</a></li> <li style="list-style: url(style/img/user.png);"> <form method="post" id="login" name="login" id="FrLogin"> <button type="submit" tabindex="2" name="submit" onclick="php/login.php">Entrar
</button>
Y tu jQuery, muy simplificado:
Código Javascript
:
Ver original$(document).ready(function(){
$(".UlMenu > li > a").click(function(e){
e.preventDefault();
$(this).siblings('ul').slideToggle(500);
});
});
El método preventDefault() permite que al hacer click en los <a> de las categorías, estos no actúen como enlaces corrientes. Notá que estoy usando el selector ".UlMenu > li > a" de forma de que el script no aftecte los <a> dentro de los submenus.
Espero te sirva, un saludo.