1

このコードを使用して、スーパーフィッシュメニューのフォントサイズを縮小しました

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

これにより、メニュー項目の高さも低くなりました。メニュー項目にカーソルを合わせると、サブメニューがドロップダウンします（水平メニューです）が、メインメニュー項目とサブメニューの間に大きなギャップがあり、どのサブ項目もクリックできません。 。

メニュー項目（メインメニューとサブメニュー）の高さを減らしながら、残りの機能をそのままにするにはどうすればよいですか？

4

1 に答える 1

3

メニュー項目のフォントサイズを縮小または変更するには、実際に次のようにsuperfishcssスタイルシートで指定します。

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

フォントサイズを変更すると、サブメニュー（子メニュー）の位置が適切になりません。したがって、次のようにサブメニューの位置を変更する必要があります。

  1. スタイルシートで「.sf-menuli：hover ul、.sf-menuli.sfHoverul」を探します。
  2. 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"）も変更することを忘れないでください。

于 2011-11-06T13:31:45.387 に答える