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?

Answer 1

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:

1. Look in the stylesheet for “.sf-menu li:hover ul, .sf-menu li.sfHover ul”
2. 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.