Horizontal Top Level Menu Items Different Colours

[DavidSloan]

Hi I am looking for help with changing the colours of the items on the horizontal top level menu. This was done previously by someone who previously setup my Prestashop. I have little coding knowledge, but it would appear the hex colours are there but the css is setting all the buttons the same. 

 

Please see below the colours are already there but the items keep reverting back to #6A89A2 How should I edit the code to pick up on the colours outlined? 

 

The website is isew2.co.uk

 

.sf-menu > li  {

  float: left;

  padding: 2px;

  background-color: #6A89A2;

  margin-right: 5px; }

 .sf-menu > li:last-child {

margin-right: 0; }

 

.sf-menu > li[data-label=About us] { background-color: #e38185; }

.sf-menu > li[data-label=Classes] { background-color: #7eaf8e; }

.sf-menu > li[data-label=Fabrics] { background-color: #faa442; }

.sf-menu > li[data-label=Sewing Machines] { background-color: #86749e; }

.sf-menu > li[data-label=My Account] { background-color: #ac8f8b; }

.sf-menu > li[data-label=Gift Vouchers] { background-color: #b9c164; }

.sf-menu > li[data-label=Sale] { background-color: #62afce; }

.sf-menu > li[data-label=Contact Us] { background-color: #969495; }

 

Many thanks. 

Edited September 28, 2016 by DavidSloan (see edit history)

[rocky]

It's probably better to use nth-child so it works no matter what the text label is. For example:

.sf-menu > li:nth-child(1) { background-color: #e38185; }
.sf-menu > li:nth-child(2) { background-color: #7eaf8e; }
.sf-menu > li:nth-child(3) { background-color: #faa442; }
.sf-menu > li:nth-child(4) { background-color: #86749e; }
.sf-menu > li:nth-child(5) { background-color: #ac8f8b; }
.sf-menu > li:nth-child(6) { background-color: #b9c164; }
.sf-menu > li:nth-child(7) { background-color: #62afce; }
.sf-menu > li:nth-child(8) { background-color: #969495; }

[DavidSloan]

THANK YOU SO MUCH ROCKY!! This worked...I really appreciate that. I also applied it to hover coding too and that worked too ... awesome!! 

[b.tsvetkov]

 

It's probably better to use nth-child so it works no matter what the text label is. For example:

.sf-menu > li:nth-child(1) { background-color: #e38185; }
.sf-menu > li:nth-child(2) { background-color: #7eaf8e; }
.sf-menu > li:nth-child(3) { background-color: #faa442; }
.sf-menu > li:nth-child(4) { background-color: #86749e; }
.sf-menu > li:nth-child(5) { background-color: #ac8f8b; }
.sf-menu > li:nth-child(6) { background-color: #b9c164; }
.sf-menu > li:nth-child(7) { background-color: #62afce; }
.sf-menu > li:nth-child(8) { background-color: #969495; }

Where I have to make these changes? I mean which file is it?

[rocky]

themes/default-bootstrap/modules/blocktopmenu/css/superfish-modified.css