Superfish menu - current item highlight

Question

I am having an issue with my superfish menu. Current item highlight works down to the second level but not in the third level. I am not a CSS expert. What is wrong in my code?

That's the site where the third level does not highlight correctly. All items in the third level are highlighted instead of just the selected one.

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

That's my CSS code for the menu:

.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;
}

This is the full CSS file: http://web182.theta.ibone.ch/vbl/fileadmin/templates/css/navigation/superfish.css

Answer 1

Here you have the correct syntax :

.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;
}

And here you forgot the >

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

So any a inside a li.current (at any level inside) gets the style.

Correct way

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