I was pretty busy recently but I hope I will be able to share with you results of my recent projects ;).
Pretty often we use image as background of navigation tabs. Applying them is pretty easy. We need to create image and cut it into two pieces. Smaller one – 15 px wide – is assign to <a> element and fixed on the left side of tab and bigger one – 200 px wide – is assign to <li> element and fixed to the right side of tab. This way tab background can stretch when we put more content into it.
Problems starts once we want to have different background image when moving mouse over them. Actually there is only one problem – IE – that is able to apply pseudo-class hover only for <a> elements. Hence it doesn’t display proper background on right side of the tab because it has <li> element assigned.
But there is a way to go around and have functional menu working even in IE. Solution I provide below isn’t my original idea. I have learnt it thanks to google ;) . Mainly. It is powerful source of information if you know how to ask right questions. This way I’ve found few great articles on that subject that helped me to solve my issue. I hope it will be useful for you too!


All list items (li) generated by wp_list_pages() are marked with the class page_item. When wp_list_pages() is called while displaying a Page, the list item for that Page is given the additional class current_page_item.

We need that information to create proper css.

First goes html markup usually found in header.php file:

<div id="menu">
<ul id="tabs">
<li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
<?php wp_list_pages('depth=1&title_li='); ?>

Now goes style.css:

#menu {
position:relative; /* menu is moved down from its default position */
top: 30px;
height: 26px; /* height of tabs in menu */
width: 960px;
margin: 0px auto;
text-align: center;
font-weight: bold;
#tabs {
list-style: none; /* list without any special elements */
margin: 0 3px;
padding: 0px;
float: left; /* all tabs will be displayed in a row */
clear: both;
#tabs li {
float: left;
height: 26px;
background: url(images/menur.png) top right no-repeat;
margin: 0 3px; /* space between tabs */
white-space: nowrap;
#tabs .page_item a {
color: #fff;
display: block;
background: url(images/menul.png) top left no-repeat;
text-decoration: none; /* to get rid of default underline of links */
padding: 0px 10px;
line-height: 26px;
#tabs li:hover {
background-position: 100% -36px; /* to change background when hovering */
#tabs .page_item a:hover {
background-position: 0px -36px;
border: none;
#tabs li.current_page_item {
color: #eee;
text-decoration: none;
background: url(images/menucurrentr.png) top right no-repeat;
#tabs .current_page_item a, #tabs .current_page_item a:visited {
color: #eee;
text-decoration: none;
background: url(images/menucurrentl.png) top left no-repeat;

Background position is moved 36 px down when hovering because background image height is 36 px.

Here are all images used for this menu:
menul.png menur.png menucurrentl.png menucurrentr.png
As you can see list of pages will have gradient background darker on the top and lighter on the bottom. When hovering gradient background changes to opposite (lighter on the top and darker on the bottom). For current pages background is one color only.

And that’s the way it looks ‘live’.