Question

我的超级鱼菜单有问题。当前项目突出显示工作到第二级但不在第三级。我不是CSS专家。我的代码出了什么问题？

这是第三级未正确突出显示的网站。第三级中的所有项目都会突出显示，而不是仅选定的项目。

http://web182.theta.ibone.ch/vbl/berichte/bildberichte/vereinspreis-2013.html

这是菜单的CSS代码：

.sf-menu {
    margin: 0px;
    padding: 0px;
    float:right;
}

.sf-menu li {   
    margin: 0px;
    padding: 5px;
    list-style: none;
    float:left;
    background: #a00000;

}

.sf-menu a {
    line-height: 35px;
    padding: 0 15px;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
    display: block;
}

.sf-menu > li > a:hover,
.sf-menu > li.current > a,
.sf-menu > li.sfHover > a {
    background: #d00000 url(../../images/bg-top-a-active.png) no-repeat center bottom;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
    text-decoration: none;
}

.sf-menu ul {
    padding: 0 20px 5px;
    background: #fff;
    -moz-box-shadow: 0px 2px 2px #999;
    -webkit-box-shadow: 0px 2px 2px #999;
    box-shadow: 0px 2px 2px #999;
    min-width: 140px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
}

.sf-menu ul li {
    margin: 0px;
    padding: 0px;
    background: none;
    text-align: left;
}

.sf-menu li li a,
.sf-menu li li a:visited {
    padding: 0;
    line-height: 30px;
    background: #fff;
    color: dimgray;
    border-bottom: 1px dotted #ccc;
    font-weight: normal;
    text-transform: none;
    text-shadow: none;
}

.sf-menu li li a:hover,
.sf-menu li li.current a {
    color: #d00000;
    text-decoration: none;
}

这是完整的CSS文件：http://web182.theta.ibone.ch/vbl/fileadmin/templates/css/navigation/superfish.css

Answer 1

这里有正确的语法：

.sf-menu > li > a:hover,
.sf-menu > li.current > a,
.sf-menu > li.sfHover > a {
    background: #d00000 url(../../images/bg-top-a-active.png) no-repeat center bottom;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
    text-decoration: none;
}

在这里你忘记了＆gt;

.sf-menu li li a:hover,
.sf-menu li li.current a {
    color: #d00000;
    text-decoration: none;
}

所以 li.current （内部任何级别）内的任何 a 都会获得样式。

正确的方式

.sf-menu li li a:hover,
.sf-menu li li.current > a {
    color: #d00000;
    text-decoration: none;
}

Superfish菜单 - 当前项目突出显示

1 个答案: