Chang Tab to open on hover

Chang Tab to open on hover

I'm editing a website someone else created and they simply want to change the navigation (which is using Tabs form Jquery UI) from click to open and close to open on hover and close on hover. When I try to just add event: 'mouseover' it is really jerky and if you slide back and forth in the right spot 2 or 3 drop down menus stay open at once. Is there an easy way to make these menus open and close on hover instead of click to open and click to close? (I've attached an image, the 2 menus can be seen)

<!--my notes-->Click to close - ORIGINAL HEADER JQUERY CODE (ONLOAD.JS)<!--end my notes>
$(document).ready(function () {
    var $tabs = $("#main-navigation").tabs({collapsible: true, selected: -1, fx: { height: 'toggle' } });


<!--my notes-->Hover to Open GLITCHY - NEW HEADER JQUERY CODE, OPEN TABS ON HOVER <!--end my notes>(ONLOAD.JS)
$(document).ready(function () {
    var $tabs = $("#main-navigation").tabs({event: 'mouseover', collapsible: true, selected: -1, fx: { height: 'toggle' } });