Need help to change jquery function click on hover

Need help to change jquery function click on hover

Hi everyone, I'm a newbie or a noob :)
I'm doing a website with a simple menu. In this menu when I click on the link "collections" appear a submenu above with other link.
Now my client want this effect with a hover: when I mouseover on the link "collections" appear the submenu, when i mouseout the submenu will disappear.
I try different functions but I havent resolve this problem.

This is the jQuery code: 
$(document).ready(function(){ $("div#toggle a.button").click(function () { $("div#toggle div.box").toggle("slow"); }); hidden = true; $("div#custom a.button").hover(function () { if(hidden == false) { $("div#custom div.box").fadeOut(); hidden = true; } else { $("div#custom div.box").fadeIn(100); hidden = false; } });

This is the CSS code:

#custom { z-index:0; } .box { width:100%; height:20px; border:0px solid #999; background-color:rgb(128, 129, 132); display:none; position:fixed; left:0; margin-top:6px; z-index:0; font-family:Arial, Helvetica, sans-serif; font-size: 10px; color:#E6E4D7; }
The page is at http://www.mediaxsrl.it/web/loloey/forme/formeit.html

Anyone can help me?
Very thanks