jquery - Adding background images to navigation menu in wordpress and change images dynamicaly

Question

In my wordpress home page having navigation menus , so i want to add 4 different images to first 4 navigation menu's then if 5th menu is available then gives 1st menus image as background likewise for 6th -> 2nd image , for 7th -> 3rd image, for 8th-> 4th image such sequence goes running till end of the menu list. So it continue the group of 4 series. So for navigation images i uses the unorderd list this tag . So please help me out.. I am suck on that problem.

Answer 1

In case of this HTML markup

<ul id="menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
</ul>

you can use :nth-child() selector.

Here is CSS:

#menu {
    list-style-type: none;
}

#menu li:nth-child(4n-3) {
    background: red;
}
#menu li:nth-child(4n-2) {
    background: green;
}
#menu li:nth-child(4n-1) {
    background: blue;
}
#menu li:nth-child(4n) {
    background: silver;
}

Just replace colors in background property with images you want to use for background.

http://cssdeck.com/labs/csfcyj5t