9
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;
}
}
}
}
}