Hover effect for menu items and current site state

Hi, I want to ask about adding underline for menu navigation items and current site state for Editor X site.

Right now only the text colour can be changed.

Thanks so much!!

For the HOVER effect, I’ve found this but it has problems with the code (picture)

$w.onReady(function () {
    //removing the underline when the page is ready
    removeUnderline();
    //removing the underline when not hovering the text
    $w('#horizontalMenu1').onItemMouseOut(()=>{removeUnderline();});
    //adding the underline when hovering the text
    $w('#horizontalMenu1').onItemMouseIn(()=>{addUnderline();});
});

function removeUnderline(){
    let oldHtmlStr = $w('#horizontalMenu1').html;
    let newHtmlStr = oldHtmlStr.replace( /underline/i, 'none'); 
    $w('#horizontalMenu1').html = newHtmlStr;   
}

function addUnderline(){
    let oldHtmlStr = $w('#horizontalMenu1').html;
    let newHtmlStr = oldHtmlStr.replace( /none/i, 'underline'); 
    $w('#horizontalMenu1').html = newHtmlStr;   
}

Issue: