Hover box background on text

Site URL: https://oriole-panda-2fhm.squarespace.com/

Hi, 

I am trying to have a hover box effect in my mega menu that is similar to the effect of the regular navigation section. The mega menu is pulling a regular section, so the items are not ''navigation items'' but regular text box items.

I have gotten part of the effect using the code below, but I would like the background box to be a bit wider top to bottom around the lettering WITHOUT it displacing the text top-bottom.

The links from the text should be clickable anywhere on the background box. 

site url: https://oriole-panda-2fhm.squarespace.com/

PW: dialogue

CODE:

.sqsrte-small:hover{
  a {
    color: white !important;
    padding-left: .5em;
    padding-top: 0;
    padding-bottom: 0;
      }
    }
.sqsrte-small:hover {
  background: #112742 !important;
}
 

any help is appreciated 🙂

Andrew

6 hours ago, AndrewDurand said:

Site URL: https://oriole-panda-2fhm.squarespace.com/

Hi, 

I am trying to have a hover box effect in my mega menu that is similar to the effect of the regular navigation section. The mega menu is pulling a regular section, so the items are not ''navigation items'' but regular text box items.

I have gotten part of the effect using the code below, but I would like the background box to be a bit wider top to bottom around the lettering WITHOUT it displacing the text top-bottom.

The links from the text should be clickable anywhere on the background box. 

site url: https://oriole-panda-2fhm.squarespace.com/

PW: dialogue

CODE:

.sqsrte-small:hover{
  a {
    color: white !important;
    padding-left: .5em;
    padding-top: 0;
    padding-bottom: 0;
      }
    }
.sqsrte-small:hover {
  background: #112742 !important;
}
 

any help is appreciated 🙂

Andrew

Do you mean increasing this space for each item?

yes, I would like the dark background to be increased, but not displace the text around it.

Is that possible?

Thanks.