Блог

Я уменьшил размер шрифта меню superfish, используя этот код

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

что также уменьшило высоту пунктов меню. При наведении курсора мыши на пункт меню подменю раскрывается (это горизонтальное меню), но между пунктом главного меню и подменю большой разрыв, и я не могу щелкнуть ни по одному из подпунктов.

Как мне уменьшить высоту пунктов меню (главного и подменю), но сохранить остальную функциональность как есть?

Чтобы уменьшить или изменить размер шрифта элементов меню, вы действительно указываете это в таблице стилей 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;
}
  

ИЛИ вы можете использовать атрибут 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. */
}
  

В этом случае также не забудьте изменить ВЕРХНИЙ атрибут подменю («.sf-menu li:hover ul, .sf-menu li.sfHover ul»), как описано выше.