Auto Expanding Menu on Hover

It can be easily be done using only a couple of JavaScript lines of code:

APEX 5 and 18

(function(ut, $) {

var TREE_NAV_WIDGET_KEY = 'nav';

$(window).on('theme42ready', function() {
    /* Make sure that the navigation menu is collapsed on page load */
    if (ut.toggleWidgets.isExpanded(TREE_NAV_WIDGET_KEY)){
        ut.toggleWidgets.collapseWidget(TREE_NAV_WIDGET_KEY);
    }

    /* Expand on mouse over, collapse on mouse out */
    $('.apex-side-nav.js-navCollapsed .t-Body-nav').hover(
        function(){
            ut.toggleWidgets.expandWidget(TREE_NAV_WIDGET_KEY);
        },
        function() {
            ut.toggleWidgets.collapseWidget(TREE_NAV_WIDGET_KEY);
        }
    );
});

})(apex.theme42, apex.jQuery);

APEX 19+
Starting with APEX 19.1, the apex.theme42.toggleWidgets is not exposed anymore, so we have to rely on trigger the click event of the menu toggle button.

(function($) {
    
$(window).on('theme42ready', function() {
    /* Make sure that the navigation menu is collapsed on page load */
    if ($('.t-PageBody').hasClass('js-navExpanded')) {
        $('#t_Button_navControl').click();
    }

    /* Expand on mouse over, collapse on mouse out */
    $('.apex-side-nav .t-Body-nav').hover(
        function(){
            //only expand if the side menu is collapsed
            $('.t-PageBody:not(.js-navExpanded) #t_Button_navControl').click();
        },
        function() {
            $('#t_Button_navControl').click();
        }
    );
});

})(apex.jQuery);

First thing we need to do is make sure that the side navigation is collapsed. Then we add a hovering handler using the jQuery .hover() on the navigation menu container.

Have fun!