HI, how to open the dropdown menu widget by hover than by click?

I tried overwriting the javascript of dropdown menu richwidget by changing the click with hover. it works but i can't hover to the dropdown panel menu. When I hover it disappears.

Here's What i did,

SyntaxEditor Code Snippet

$(function($) {
    var RichWidgets = (window.RichWidgets = window.RichWidgets || {});

    // configuration
    var rootSel = '.Menu_DropDownButton',
        primarySel = '.Menu_TopMenu',
        panelSel = '.Menu_DropDownPanel',
        openClass = 'open';

    // auxiliary stuff
    var caproot = $(document.body);
    var $openRoots = $([]);

    var openRoot = function($root) {
        $root.addClass(openClass);
        if (RichWidgets.DropDownMenus.customOpenFunction) {
            $root.find(panelSel).each(function() {
                RichWidgets.DropDownMenus.customOpenFunction(this);
            });
        } else {
            $root.find(panelSel).show();
        }
        $openRoots = $openRoots.add($root);
    };
    var closeRoot = function($root) {
        $root.removeClass(openClass);
        if (RichWidgets.DropDownMenus.customCloseFunction) {
            $root.find(panelSel).each(function() {
                RichWidgets.DropDownMenus.customCloseFunction(this);
            });
        } else {
            $root.find(panelSel).hide();
        }
        $openRoots = $openRoots.not($root);
    };
    caproot.delegate(primarySel, "hover", function(ev) {
        var $primary = $(this);
        var $root = $primary.closest(rootSel);
        if ( !$root.length ) { return; } // not our menus, bail out
        var $panel = $root.find(panelSel);
        if ( !$panel.text().length ) { return; } // menu without content

        if ($root.hasClass(openClass)) { // close it
            closeRoot($root);
        } else { // open it
            openRoot($root);
        }
        ev.preventDefault();
    });

    // 2. a hover somewhere that's not a menu, closes all menus
    $( document.body ).bind( "hover", function(ev) {
        var $inMenu = $(ev.target).closest(rootSel);
        $openRoots.not($inMenu).each(function() {
            var $root = $(this);
            if ($root.hasClass(openClass)) {
                closeRoot($root);
            }
        });
    });

    // 3. add the V thingie
    $( rootSel ).has( panelSel + " a" ).find( primarySel ).each(function() {
        var $this = $( this );
        $this.find("div").append(' <span class="Menu_DropDownArrow"/>' );
    });

    // 4. expose an API
    RichWidgets.DropDownMenus = {
        // close all currently open menus
        closeAllMenus: function() {
            $openRoots.each(function() { closeRoot($( this )); });
        },
        // specify a custom function that shows the menu panel
        // (possibly using a different effect)
        // arguments: HTMLElement to be shown 
        customOpenFunction: function(e) { $(e).slideDown(50); },
        // specify a custom function that hides the menu panel
        // (possibly using a different effect)
        // arguments: HTMLElement to be hidden
        customCloseFunction: null
    };
});