css 继承让我失望

Question

我目前正在制作一个使用 superfish 的菜单。它可以通过 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);

Answer 1

为了响应您的新问题 - 文本现在位于顶部而不是底部 - 更改 anchor 元素的高度 <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 请更新问题正文以反射(reflect)您问题中的更改；)