Cannot prevent css inheritance

Question

I constantly fail to prevent a submenu item from inheriting the color of a top item. I know that similar questions have been asked already but am sorry to not be able to solve my problem using them. CSS:

.Topmenu a{
  color:black;}
.Topmenu.update a{
  color:blue;}
.Submenu a{
  color:black;}

Now the Menu itself looks like this:

<div id='Mainmenu'><ul>
<li class='Topmenu update'><a href='Link1'>Link1</a><ul>
<li class='Submenu'><a href='Link2'>Link2</a></li>
</ul></li>

Now the submenu Link still is blue. What am I doing wrong?

Edit: Sorry for the confusion, it's a 2D-Menu, the Main Menu(Topmenu items) is horizontal with vertical Topmenu's (Submenu Item).

At first you never close your first <li> there is an <ul> behind your first list item. — Zowie van Geest
– Zowie van Geest, Commented Aug 25, 2017 at 8:50

Gerard · Accepted Answer · 2017-08-25 09:13:08Z

1

It is because of specificity. The .Submenu class is overwritten by .Topmenu.update. To avoid this, put .Topmenu.update in front of the .Submenu class.

.Topmenu a {
  color: black;
}

.Topmenu.update a {
  color: blue;
}

.Topmenu.update .Submenu a {
  color: black;
}

<div id='Mainmenu'>
  <ul>
    <li class='Topmenu update'><a href='Link1'>Link1</a>
      <ul>
        <li class='Submenu'><a href='Link2'>Link2</a></li>
      </ul>
    </li>
  </ul>
</div>

answered Aug 25, 2017 at 9:13

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Minecrawler Over a year ago

Thank you for your help! I didn't know that .Topmenu.update .Submenu a has to be specified differently!

mw509 · Accepted Answer · 2017-08-25 09:13:23Z

0

The problem is from your css. it should look like this;

.Topmenu a {
  color: black;
}
.Topmenu, .update a {
  color: blue;
}
.Submenu a {
  color: black;
}

Notice the second block has a comma and space after the first class.

Although your HTML does have an error, it should still not affect the CSS from working right. and yes you have to fix your html it does not look right. so fix from @zowie's correction.

Let me know.

answered Aug 25, 2017 at 9:13

mw509

2,0811 gold badge21 silver badges28 bronze badges

1 Comment

Minecrawler Over a year ago

I just tried it, if i put </li> after link1, the following ul doesnt contain to that submenu, resulting in a breakdown of the whole menu. the <ul> must be contained in the topmenu- li to be a submenu.

tronic · Accepted Answer · 2017-08-25 10:35:24Z

0

Use > for the first level:

.Topmenu a{
    color:black;
}
.Topmenu.update > a{
  color:blue;
}
.Submenu a{
  color:black;
}

edited Aug 25, 2017 at 10:35

answered Aug 25, 2017 at 9:28

tronic

5243 silver badges14 bronze badges

Collectives™ on Stack Overflow

Cannot prevent css inheritance

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related