I want my superfish horizontal menu items to have less height than the default. In other words, less top and bottom padding.

When I change padding in the css I can get them to be the height that I am looking for. However, no matter how I do it, this causes a transparent gap to appear between the top level items and their sub menus.

Is there a special css process for changing the top/bottom padding of the menu items?

Thanks!

Comments

mehrpadin’s picture

mehrpadin commented

Hey Link,

Something like this should work:

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	top: 40px;
}
webservant316’s picture

webservant316 commented

hey curious if the above worked?

clockwood’s picture

clockwood commented

Yeah, it works... but, it applies top spacing to -all- sub level items, which messes up the parent/child alignment on 2nd level items. I added a bit of css to reset the spacing on sub-level items.

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
top: 40px;
}

.sf-menu li:hover ul ul,
.sf-menu li.sfHover ul ul{
top: 0;
}
mehrpadin’s picture

mehrpadin commented
Status: Active » Closed (fixed)
elijah lynn’s picture

elijah lynn
Location Portland, Oregon
commented

#3 is very helpful, I increased the height and was looking for a quick way to make the submenu items pop out at the right height. This hit the spot and I was well on my way to the next issue!

Thanks