Css being overidden

Any ideas as to why this css is being overidden and what I should do to fix it?

nav .sub-menu li a { color: #ffffff; }

http://www.muslimahwebdesign.co.uk/lookovermyshoulder

The color is being set at line 56 in one of your styles.css.

nav .menu li a {    color: #333333;}

I’m not seeing the rule you added in the web inspector either.

I’m tring to set the sub menu link nav .sub-menu li a which needs to be a different color to the nav .menu li a

If I’m looking at the sub menu in chrome inspect element is show the color: #ffffff; as crossed out so I’m wondering why it is not letting me set the color of the sub menu to a different color of the top level menu items?

At this moment, using FireBug, I show the following styles vying to apply a color to the anchor. This list is from FireBug, so the style at the top is the latest in the cascade and/or the most specific of the styles. It overrides those below it.

EDIT: Let me try again…

themes/wplms_white/style.css?ver=4.3.1 (line 56)

nav .menu li a {
    color: #333333;
}

themes/wplms/css/style.css?ver=0.1 (line 1040)

nav .sub-menu li a {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    color: #fff;
    display: block;
    font-size: 12px;
    opacity: 0.8;
    padding: 10px;
}

Since both selectors have the same specificity, the last stylesheet wins. (That would be the top rule in this FireBug list).

ok so how does the nav .menu li a overide the sub nav and how do I set the sub nav colour which needs to be different to the top level nav?

You need that rule to come later in the stylesheet than rule that both I and Ron pointed to.

The first rule targets all ‘a’ elements that are descendants of .menu which will include all submenus as they are also descendants.

You need to have the rules in the stylesheet like this.

nav .menu li a {
    color: #333333;
}
nav .sub-menu li a {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    color: #fff;
    display: block;
    font-size: 12px;
    opacity: 0.8;
    padding: 10px;
}

Or if you don’t have access to the stylesheet with the first rule in place then you will need to add more weight to your over-riding rule.

e.g.

   nav .menu .sub-menu li a{color:#fff}

Or if you had been more careful from the start you could have styled the first level only using the child selector.

   nav .menu > li > a {
        color: #333333;
    }

Ahh I see now ok that you very much

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.