1

現在、スーパーフィッシュを使ったメニューを考案中です。CSS で完全にカスタマイズできますが、非常にイライラする問題が発生しています。

第 2 層のメニューは、I-know-not-where から何らかの形で値を継承し、それを変更するために何をしても、レイアウト全体が完全に破壊されます。テキストがどういうわけかさらに下の行全体であるように見えます。ただし、マウスオーバー スタイルは正常に機能しています。

もう 1 つの苛立たしいことは、テキストを tier1 メニュー項目からバーの下部に移動する必要があることです。これまで試したことはありませんが、項目全体ではなくテキストのみを移動しました。誰かがそれに対する解決策を持っているなら、それも大歓迎です。

ここで私が何を意味するかを見ることができます: http://redaxo.witconsult.de/ メニュー項目 2 と 5 (Leistungen & Kontakt) のティア 2 メニューに関するものです。

問題の原因と思われるコードは次のとおりです。コード全体は次のとおりです: http://redaxo.witconsult.de/files/superfish.css

ありがとうございます！

.sf-menu {
    float:          left;
    margin-bottom:  1em;

}

.sf-menu a {
    text-indent: 7px;
}


.sf-menu a, .sf-menu a:visited  {
    /* visited pseudo selector so IE6 applies text colour*/
    color: #333;
}

.sf-menu li {       /*///////////// menu lvl 1 /////////////*/
    color:          #333;
    width:          118px;
    line-height:    85px;
    font-weight:    normal;
    font-size:      14px;
    text-decoration:none;
    background:     url(../images/menu/menuitem.png);
}

.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
    color:          #DDD;
    line-height:    85px;
    background:     url(../images/menu/menuitem-mo.png);
}

.sf-menu li li {    /*///////////// submenu lvl 2 ///////////////////*/
    color:      #ddd;
    font-size:  12px;
    top:        50px;
    height:     26px;
    background:     url(../images/png_black40per.png);
}

.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
    color: #333;
    line-height: 26px;
    background: url(../images/png_white40per.png);
4

1 に答える 1

1

テキストが下部ではなく上部にあるという新しい問題に対応して、アンカー要素の高さを変更し、<a>いくつかを追加しますpadding-top。

/* superfish.css line 59 */
.sf-menu a {
    color:#DDDDDD;
    text-indent:7px;
    height:         50px; /* ADDED */
    padding-top:            35px; /* ADDED */
}
/* superfish.css line 78 */
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
    color:          #DDD;
    height:         50px; /* CHANGED */
    background:     url(../images/menu/menuitem-mo.png);
    padding-top:            35px; /* ADDED */
}

...編集できない場合は、次superfish.cssのようなルールを別の場所に追加します。

#site-content .sf-menu li a {
    height:         50px;
    padding-top:            35px;
}

PS質問の変更を反映するように質問本文を更新してください;）

于 2011-03-19T13:07:23.463 に答える