我使用这段代码减小了 superfish 菜单的字体大小
.sf-menu a
{
font-size: 15px;
padding: 8px;
}
这也降低了菜单项的高度。当我悬停在菜单项上时,子菜单下拉(它是一个水平菜单),但是主菜单项和子菜单之间有很大的差距,我无法点击任何子项.
如何降低菜单项(主菜单和子菜单)的高度,同时保持其余功能不变?
最佳答案
要减小或更改菜单项的字体大小,您确实在 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;
}
如果你想改变菜单项的高度,那么你可以改变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"),如上所述。
关于javascript - 如何降低 superfish 中菜单项的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8027079/