Reducing the height of hover box size of the menu item

[Janu sree]

Hello Community,

I've placed a Language picker on the 2nd bar(MegaMenu) which is below the Global header. 

When hovering on the item, the BG box of the hover is looking bigger and coming out of the line which is touching the Global header. Usually the lang picker should be on Header but as per the requirement I've moved it to next menu bar, So as per my guess, it is taking the height as same as the Header.

Please suggest how to reduce the height/size of the hover of picker, so that this will align same as the other menu items in the 2nd bar(MegaMenu).
FYI: I'm using seperate widget for stylish the picker. Below is the CSS I've used for Hover.

&:hover {
color: $navbar-inverse-link-hover-color;
cursor: pointer;
background-color: darken($sp-navbar-divider-color,5%);
}

[Anand Kumar P]

Hi @Janu sree ,

&:hover {

color: $navbar-inverse-link-hover-color;

cursor: pointer;

background-color: darken($sp-navbar-divider-color, 5%);

/* Reduce padding and margins for a smaller one

padding: 5px; 

margin: 0; 

}

Thanks,

Anand

[Janu sree]

Hi @Anand Kumar P 

I've used the padding and margin like above, so when I Hover on the picker it is coming as a glitch, like the text and hover is moving it is not consistent in one place, Though on one hover I can see the box height is reduced a little bit at down

[Anand Kumar P]

Hi @Janu sree ,
Try below code with language piker.

.language-picker {
}
.language-picker:hover {
    color: $navbar-inverse-link-hover-color;
    cursor: pointer;
    background-color: darken($sp-navbar-divider-color, 5%);
    padding: 5px;
    margin: 0; 
}

 Thanks,

Anand

[Janu sree]

@Anand Kumar P  - The hover itself is not working. May be the above class is not correct I guess.
I'm unsure if the Height of the box is coming from the Global header. But the CSS for setting the language in bold and position all I have defined for the language picker is on picker widget itself.
(nav.navbar-nav) is from the header widget.

ul.nav.navbar-nav {
position: absolute;
top: 55px;
right: 0;
}

a.lang-popup-link {
color: #000000 !important;
font-weight: bold;
}

&:hover{
color: $navbar-inverse-link-hover-color;
cursor: pointer;
background-color: darken($sp-navbar-divider-color, 5%);
}