Underline web link in menu (using border-bottom)

Hi guys. I am using MusicState for J3.0

Whenever I hover over a menu item, I want the link to not only change colour but display a nice line underneath.

I have added the following code to override.css to achieve this:

#gkMainMenu .gkMenu > ul > li > a:hover {
color: #fff;
border-bottom: 2px solid white;
}

This works up to a point - it does show a line... but it is showing it right at the bottom of the menu bar rather than 2px below the link.

The attached image shows what is currently displaying. I want the white line 2px below the links and spanning only the width of the text.

Is there any code I can add to override.css to correct this?

Menu items are made to be big blocks so they are easily accessible. Adding border adds it to entire block element, not only text. Without modifying the way menu is generated you cant make only text with border.