How to reduce the height of menu items in superfish?

Question

I reduced the font size of a superfish menu using this code

.sf-menu  a
{
    font-size: 15px;
    padding: 8px;
}

which also reduced the height of the menu items. When I hover on a menu item, the sub menu drops down (it is a horizontal menu), but there is a big gap between the main menu item and the submenu, and I am not able to click on any of the sub-items.

How do I reduce the height of the menu items (main and sub menus) but keep the rest of the functionality as is?

You should post your code on something like jsfiddle to get an answer to a question lik this. — dnuttle, Nov 06 '11 at 12:52

score 3 · Accepted Answer · edited Nov 06 '11 at 20:23

To reduce or change the font-size of the menu-items, you indeed specify it in the superfish css stylesheet, like this:

.sf-menu a {
    font-size: 15px;
    padding: 8px; /* not nessesary to do this */
}

If you do change the font-size, then the submenu (childmenu) doesn't position nice. Therefore you will need to change the position of the submenus, like this:

Look in the stylesheet for ".sf-menu li:hover ul, .sf-menu li.sfHover ul"
Change the value of the TOP attribute to the position that is suitable for you.

Like this:

.sf-menu li:hover ul, .sf-menu li.sfHover ul {
    left: 0;
    top: 2.3em;
    z-index: 99;
}

If you want to change the height of the menu-items, then you can change the padding attribute:

.sf-menu a {
    font-size: 15px;
    padding: 16px 8px;
}

OR, you can use a height attribute like this:

.sf-menu a {
    font-size: 15px;
    padding: 8px;
    height: 30px /* for example */
    line-height: 30px /* You should include this line-height attribute to align the text in the middle of the box, the value is equal to the value of height attr. */
}

In this case, also don't forget to change the TOP attribute of the submenu (".sf-menu li:hover ul, .sf-menu li.sfHover ul") as explained above.

I tried both solutions, but I am still not able to select the drop down menu :( it appears, but when I hover on it, it disappears — , Nov 06 '11 at 15:34

How to reduce the height of menu items in superfish?

1 Answers1