I remember tinkering with this way back… I don’t use the script anymore, but maybe I can help anyway.
This is what mine looks like. Below I only explain how to fix the bars, adding the percentages and putting the whole thing in a dropdown is something else.

Let’s see… I added this to the top of the script (just under “use strict”) to fix how the bars are shaped.
$('head').append('<style id="progress-detail-fix">.bar[style*="width: 0%"]{display: none;}'+
'.dashboard .lattice-single-character div {padding: 0 !important}'+
'.chart .progress, .chart .progress .bar {border-radius: 0 !important;}</style>');
To fix the colors you can replace line 44 (line number before you added the above three lines) with
'<div class="bar" title="Guru+ ('+progress.gurued_total+'/'+progress.max+')" style="background-color: #1cdc9a !important; background-image: linear-gradient(to bottom, #1cdc9a, #1cdc9a) !important; width: '+(progress.gurued_total*100.0/progress.max)+'%;">'+
and line 54 with
'<div class="bar bar-supplemental" title="'+stageNames[i]+' ('+progress.srs_level_totals[i]+'/'+progress.max+')" style="opacity: '+opacity+' !important; background-color: #1cdc9a !important; background-image: linear-gradient(to bottom, #1d99f3, #1d99f3) !important; width: '+(percentage)+'%;">'+