No more hassle with li nth child.
The script give each menu item an item number.
It always start with 0 your first menu
Make your menu the way you like it.
Run the script and define in css the different background color you would like to have for your menu or submenu item.
Code: Select all
<style>
#wb_master_CssMenu1 a.nav-link.item-0 {
background: green;
}
#wb_master_CssMenu1 a.nav-link.item-1 {
background: blue;
}
#wb_master_CssMenu1 a.nav-link.item-2 {
background: blue;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-2:hover {
background: #C72424;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-3 {
background: purple;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-3:hover {
background: #C72424;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-4 {
background: green;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-4:hover {
background: #C72424;
color: white;
}
#wb_master_CssMenu1 a.nav-link.item-7 {
background: blue;
color: white;
}
</style>
Code: Select all
<script>
$(document).ready(function(){
$( "ul li a" ).addClass(function( index ) {
return "item-" + index;
});
});
</script>
https://jsfiddle.net/Lkfd9mpr/
have fun
Fender