Search code examples
csssuperfish

Avoiding inheritance of submenu items in CSS superfish menu

I need some more help on my superfish menu here: http://web288.merkur.ibone.ch/klingler/

I would like to modify the main buttons on hover and current. However this does also change the submenu entries what I do not want. I am not a CSS expert but somehow the submenu entries do inherit the properties. What I tried to add is the following

.sf-menu a:hover,
.sf-menu li.current a,
.sf-menu li.sfHover a {
    background: #e24c4c url(../../images/bg-top-a-active.png) no-repeat center bottom;
    margin: 5px;
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;

}

This does what I want for the main buttons but it does also change the submenu entries... What am I doing wrong?

Solution

  • As I understand you only want to select the a elements which are direct children of li.current or li.sfHover.

    .sf-menu a:hover,
.sf-menu li.current > a,
.sf-menu li.sfHover > a {