I'm trying to make a menu which has 6 buttons and each of them has its own background color and hover background color. Now, I don't want the background color to show when hover if the link's parent li has an .active class. This is what I tried to do:

//I'm making li and li.active links to have the same normal and hover state bg color and then...
li, li.active{
    &:first-child{
        a, a:hover{
            background: @1-n;
        }
        + li{
            a, a:hover{
                background: @2-n;
            }
            + li{
                a, a:hover{
                    background: @3-n;
                }
                + li{
                    a, a:hover{
                        background: @4-n;
                    }
                    + li{
                        a, a:hover{
                            background: @5-n;
                        }
                        + li{
                            a, a:hover{
                                background: @6-n;
                            }
                        }
                    }
                }
            }
        }
    }
}
//..trying to overwrite the hovers only for normal li so I can't avoid applying them to li.active's ones
li{
    &:first-child{
        a:hover{
            background: @1-h;
        }
        + li{
            a:hover{
                background: @2-h;
            }
            + li{
                a:hover{
                    background: @3-h;
                }
                + li{
                    a:hover{
                        background: @4-h;
                    }
                    + li{
                        a:hover{
                            background: @5-h;
                        }
                        + li{
                            a:hover{
                                background: @6-h;
                            }
                        }
                    }
                }
            }
  
Edit
Report