Question

我使用此代码

缩小了超级鱼菜单的字体大小

.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）就不会很好。因此，您需要更改子菜单的位置，如下所示：

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

像这样：

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

如果要更改菜单项的高度，则可以更改填充属性：

.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”），如上所述。

如何降低超级鱼中菜单项的高度？

1 个答案: