Hello Thommees,

I didn't get a chance to test the below code, but I believe this could be helpful for your use-case.

JS needs to be added:-

// Adds the "ui-state-highlight" class to the selected item. Also

// requires some theme CSS adjustments.

$( "#menu" ).menu({

    select: function( e, ui ) {

        // Remove the highlight class from any existing items.

        $( this ).find( "a.ui-state-highlight" )

                 .removeClass( "ui-state-highlight" );

        // Adds the "ui-state-highlight" class to the selected item.

        ui.item.find( "> a" )

               .addClass( "ui-state-highlight ui-corner-all" );    

    }

});

CSS needs to be added:-

/* Global settings */
body {
    font-size: 0.8em;
}

/* jQuery UI theme settings */
.ui-menu .ui-menu-item {
    margin: 1px 0;
    border: 1px solid transparent;
}

.ui-menu .ui-menu-item a.ui-state-highlight {
    font-weight: normal;
    margin: -1px;
}

/* Demo settings */
#menu {
    width: 30%;
}

Please modify the code/CSS as per your need and test its applicability for your scenario.

Regards,

Ajit