Re: Mutli Color Menu Items in WordPress

[brentwpowell]

utilizing some CSS3 selectors you could utilize the :nth-of-type(n) selector to target each list item as such:

.menu li:nth-of-type(1) { background:red } /* targets the first list-item and applies a red background */

.menu li:nth-of-type(2) { background:green } /* targets the second list-item and applies a green background */

.menu li:nth-of-type(3) { background:blue } /* targets the third list-item and applies a blue background */

Keep in mind that this doesn’t have any support on IE8 or earlier without a work around. The other way that you could address this is by looking at what classes your WordPress theme, by default, applies to the menu structure. Once you have those, modify your CSS to match those classes up with some rules for background color.