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

How to reduce the height of menu items in superfish?

本文关键字：菜单项 项目 高度 菜单 何降低      更新时间：2023-09-26

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

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

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

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

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

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

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

  1. 查看样式表中的"。. 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;
}

或者，你可以像这样使用height属性:

.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:鼠标悬停。

相关文章：