Данный код выводит список меню в wordpress:

<div id="topnav">
<ul>
<li id="first-item"<?php if(is_home()) { ?> class="current_page_item"<?php } ?>></li>
<?php wp_list_pages('title_li=0&exclude='.$this_exclude_pages.'&depth=1'); ?>
</ul>
</div>

Класс current_page_item меняет фон меню при наведение и активации нужного меню.
Картинка используется одна и та же для всех меню из списка.

#topnav ul li a:hover, #topnav ul li.current_page_item a{
background: url(images/over.png) no-repeat 1px 0;
}

Как я могу сделать разные картинки для каждого из меню?
то есть что бы было несколько стилей

#topnav ul li a:hover, #topnav ul li.current_page_item1 a{
background: url(images/over1.png) no-repeat 1px 0;
}

#topnav ul li a:hover, #topnav ul li.current_page_item2 a{
background: url(images/over2png) no-repeat 1px 0;
}

и так далее.. для каждого меню своя картинка.

Какой должен быть PHP-код, что бы можно было использовать несколько фонов current_page_item1, current_page_item2, current_page_item3?

После обработки PHP выводится код:


<div id="topnav">
<ul>
<li id="first-item"></li>
<li class="page_item page-item-2"><a href="#link1">Меню1</a></li>
<li class="page_item page-item-8"><a href="#link2">Меню2</a></li>
<li class="page_item page-item-10"><a href="#link3">Меню3</a></li>
<li class="page_item page-item-12 current_page_item"><a href="#link4">Меню4</a></li>
<li class="page_item page-item-14"><a href="#link5">Меню5</a></li>
</ul>
</div>



в зависимости от нажатой кнопки меню current_page_item меняет расположение:


<div id="topnav">
<ul>
<li id="first-item"></li>
<li class="page_item page-item-2"><a href="#link1">Меню1</a></li>
<li class="page_item page-item-8 current_page_item"><a href="#link2">Меню2</a></li>
<li class="page_item page-item-10"><a href="#link3">Меню3</a></li>
<li class="page_item page-item-12"><a href="#link4">Меню4</a></li>
<li class="page_item page-item-14"><a href="#link5">Меню5</a></li>
</ul>
</div>

____________________________

Стили:

<style>
#topnav ul li a:hover,#topnav ul li.current_page_item a{
background: url(images/hover.png) no-repeat;
text-decoration: none;
}

li#first-item {
background: none;
}
</style>

____________________________

Нужно такой код написать, что бы можно было прописывать несколько разных фонов для:
current_page_item1
current_page_item2
current_page_item3
current_page_item4
current_page_item5