1

我使用此代码减小了超级鱼菜单的字体大小

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

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

如何降低菜单项(主菜单和子菜单)的高度,但保持其余功能不变?

4

1 回答 1

3

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

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

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

  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”),如上所述。

于 2011-11-06T13:31:45.387 回答