I have a nice dropdown menu in the links of my site. Check out:
https://www.sitepor500.com.br
When you hover the mouse over the links on the horizontal menu you will see a dropdown menu exactly as you want.
The JS code is bellow:
$("div.menu_links_pai_esquerda").not("div.menu_selecionado").bind("mouseenter mouseleave",
function(event) {
if (event.type == "mouseenter") {
$(this).stop(true,false).animate(
{backgroundPosition: "0px -41px"},
300
);
$(this).find("div.menu_links_pai_direita").stop(true,false).animate(
{backgroundPosition: "right -41px"},
300
);
$(this).find("img").attr("src","imagens/seta_cima.png");
$(this).find("div.menu_links_menu_flutuante").stop(true,true).slideDown(200,"easeInCubic");
}
else if (event.type == "mouseleave") {
$(this).animate(
{backgroundPosition: "0px 0px"},
300
);
$(this).find("div.menu_links_pai_direita").animate(
{backgroundPosition: "right 0px"},
300
);
$(this).find("img").attr("src","imagens/seta_baixo.png");
$(this).find("div.menu_links_menu_flutuante").slideUp(400,"easeOutExpo");
}
}
);
$("div.menu_links_filho").not("div.sem_animacao").bind("mouseenter mouseleave",
function(event) {
if (event.type == "mouseenter") {
$(this).stop(true,false).animate(
{backgroundColor:"#FFFFFF", color:"#000000"},
50
);
}
else if (event.type == "mouseleave") {
$(this).animate(
{backgroundColor:"#151516", color:"#FFFFFF"},
500,
function() {
$(this).css("background-color","");
}
);
}
}
);
Hope it helps!
