Rollover image links with my wordpress theme [closed]

Question

I haven't really ever done a background navigation rollover, I usually just change the colour of the text once it's been rolled over. However I'm try to do this now but can't seem to get it right.

I'm trying to do it all with CSS as I believe there is a way however I do see a lot of others using sprites and image rollovers. Which way is the best? I might end up having a lot of images on my website so I'm trying to stay away from them so I myself, am thinking strictly CSS. What is the right way?

This is my website

CSS

#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ }
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;}
#main-navigation li { float: left ;margin-left: 30px; }
#main-navigation li a { display: block; text-decoration: none; color: #000; }
#main-navigation li a:hover {
    color: #c7bd89;
    background-color: #900;
    width: 140%;
    line-height: 40px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 25px;
}

HTML

<nav id="main-navigation">
           <ul id="main-nav-left">
               <li class="current"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Current Season</a></li>
               <li><a href="#">Past Seasons</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Partners/Sponsors</a></li>
           </ul>
  </nav>

But I want it to look like this

What am I missing?

How ever if I use just CSS it'll break in IE and not look even remotely the same (as I will be adding a gradient to the rollover too). So the best method to use would be rollover images. So now my next problem is I'm integrating this website into wordpress soon and I know the codex for the navigation menu is

<ul id="main-navigation">
    <?php wp_nav_menu(array('menu' => 'Main Nav')); ?>
</ul>

However now if I try to put background images and individual classes on each

in my navigation it would become redundant because in the process of putting this wordpress snippet in, I do not have my

tags anymore which would mean my CSS wouldn't have anything to add itself to.

So if I were to go the image rollover way how might I go about doing it with only being able to style the #main-navigation?

Does this make sense?

Hope someone can help me.

Answer 1

Each menu item will have its own ID so they can be targeted individually if you want to do images.

I would recommend looking at gradients in CSS though to keep the load lighter, or if not, definitely go the sprite route.

EDIT from comment below

The wp_nav_menu function automatically includes a different ID/class on each menu item, so you don't have to specify them yourself, just use the autogenerated ones. Here's what gets generated for a menu item for one of my sites:<li id="menu-item-14102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14102">about</li>. Each link has a different number, so it can be targeted directly. Your other option is to specify a css class for any menu item in the WordPress Admin. Under Appearance > Menus, make sure you've gone to screen options and enabled the css checkbox, and then under each menu item you can add a specific class to the item so that it can be individually targeted.

All that said, you're still better off going with the gradients in CSS (fixing spelling mistakes is a lot easier, as is adding new menu items, deleting old ones). IE supports gradients back to IE 6, and CSS3 gradients from 9 on I think, it just takes a different format. From David Walsh's Guide to CSS Gradients:

#example1   {
/* fallback */
background-color:#063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.32,#063053),color-stop(0.66,#395873), color-stop(0.83,#5c7c99));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(top,#063053,#395873,#5c7c99);
/* ie 6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
/* ie10 */
background-image: -ms-linear-gradient(#063053,#395873,#5c7c99);
/* opera 11.1 */
background-image: -o-linear-gradient(#063053,#395873,#5c7c99);
/* The "standard" */
background-image: linear-gradient(#063053,#395873,#5c7c99);

}