change underline line colour when hovering between menu item

Question

I have mega menu in sharepoint 2013 build using managed metadata. I would like to find out how i can add different colour of line in the top menu when it hover between top menu item using jquery.

var i = 0;

var ul = null;
jQuery("div #zz12_TopNavigationMenu ul").each(function () {
    i++;
    if (i == 1) {
        ul = this.id.toString();
        return false;
    }
});
ulItems = jQuery("ul#" + ul);

Answer 1

create javascript with content below then link the javascript to masterpage

var divs = document.querySelectorAll('#DeltaTopNavigation>div>ul>li>ul');


divs[0].style.borderTop='blue';
divs[1].style.borderTop='red';
divs[2].style.borderTop='green'; 

Answer 2

You need to use the hover selector.

a:hover { 
    background-color: yellow;
}

So for the sharepoint menu, it would be something like:

div #zz12_TopNavigationMenu ul a:hover{
    background-color: yellow;
}

Reference - CSS hover selector