javascript - 如何降低 superfish 中菜单项的高度？

Question

我使用这段代码减小了 superfish 菜单的字体大小

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

这也降低了菜单项的高度。当我悬停在菜单项上时，子菜单下拉(它是一个水平菜单)，但是主菜单项和子菜单之间有很大的差距，我无法点击任何子项.

如何降低菜单项(主菜单和子菜单)的高度，同时保持其余功能不变？

Answer 1

要减小或更改菜单项的字体大小，您确实在 superfish css 样式表中指定了它，如下所示:

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

如果您确实更改了字体大小，那么子菜单 (childmenu) 的位置就不会很好。因此，您需要更改子菜单的位置，如下所示:

1. 在样式表中查找“.sf-menu li:hover ul, .sf-menu li.sfHover ul”
2. 将 TOP 属性的值更改为适合您的位置。

像这样:

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

如果你想改变菜单项的高度，那么你可以改变padding属性:

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

或者，您可以使用这样的高度属性:

.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. */
}

在这种情况下，也不要忘记更改子菜单的 TOP 属性(".sf-menu li:hover ul, .sf-menu li.sfHover ul")，如上所述。