1

我目前正在制作一个使用超级鱼的菜单。它可以通过 css 完全定制，但我遇到了一个非常非常令人沮丧的问题。

第二层菜单以某种方式继承了我不知道在哪里的值，而我所做的任何改变都会完全破坏整个布局。看起来好像文本在某种程度上是一整行，然后应该是。但是，鼠标悬停样式正在正常工作。

另一个令人沮丧的事情是我需要将文本从 tier1 菜单项移动到栏的底部 - 到目前为止，我没有尝试过仅移动文本而不是整个项目。如果有人对此有解决方案，也将不胜感激。

您可以在这里看到我的意思：http: //redaxo.witconsult.de/ 它涉及菜单项 2 和 5 上的 2 级菜单（Leistungen & Kontakt）

这是我认为导致问题的代码：这里的整个代码： 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 回答