Underline on Hover Effect

I’m using the following CSS to create a hover effect on Mega Menu. I’d like to create a 10px padding between the border and the Navigation text. Any suggestions; so far, I’ve came up empty?

.underline-on-hover:hover {
text-decoration: none;
border-bottom: 4px solid white

1 Like

I figured it out :wink:

.underline-on-hover:hover {
border-bottom:4px solid white;



I was curious to see how this looked, so I tried it on a project that I’m using Mega Menu on, but didn’t see any effect. Also, when I search the Page Source code, I can’t find the selector .underline-on-hover:hover. Also looked on the Mega Menu example pages, but didn’t see .underline-on-hover:hover in the source code there either.

So feeling pretty stupid as I’m probably overlooking something obvious. Any clue as to what I’m missing?


No worries @David, You would need to add the following as the title of your page on the Mega Menu.

%span class=“underline-on-hover”>PAGE NAME

or, @webdeersign sent me this:

li.top-level-item:hover {
left: 0;
right: 0;
width: 100%
content: " ";
border-bottom: 5px solid #FFFFFF;

The first option would underline just the wording and the second option would underline the entire element.

1 Like

Thanks for sorting me out @dropgates. Those will be handy to have on hand.

1 Like

btw, I forgot to mention; on the second option, you don’t need to add the tag into the Title section.

1 Like

Thanks @dropgates! It did seem pretty clear from what you wrote and from looking at the code, but clarification is always appreciated. :slight_smile:

1 Like