add css class to each menu element and style each class in style.css file.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You could do it with CSS nth-child
.nav-menu li:nth-child(1) { background: brown; }
.nav-menu li:nth-child(2) { background: blue; }
.nav-menu li:nth-child(3) { background: green; }
And so forth.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
add css class to each menu element
Twenty Twelve uses the wp_nav_menu function that already generated classes in each menu item.
style each class in style.css file
Can cause scalability issues, but perfectly legitimate.
Please note that :nth-child selector in Internet Explorer works since version 9. You’ll need to use JavaScript code such as http://selectivizr.com/ or IE9.js to make it work in IE8 and earlier.
