Spending time on your menu styling will be time well worth spent. Though going over the top with link enhancement will be more distracting than helpful – making good use of icons, graphic symbols and other small additional visuals can create a richer user experience – adding a touch of style and character.
Using CSS – you can use background images to add visual effects to your links – here is a quick step-by-step to take you through one example of a so-called ‘sprite rollover’, as in the example here.

The main advantage of a sprite rollover is the more effective loading of the rollover visuals and therefore a faster response. It is possible to set up an image rollover by merely changing the image if used as a background image for a link. Creating separate image files for each state of the link would allow you swap the images via CSS for the a:hover and a:active. This set up loads in the image only when needed – and on first page view – will require some loading time when a rollover is activated.

The sprite setup in comparison works by shifting the position of 1 single image file for the rollover effect. This means that the image is loaded with the page and is ready for display on rollover – without requiring any extra loading time.

1. create and optimise the graphic
   as the image will include all different stages of the rollover effect – create a suitable image file. My example here shows 2 stages – one image for the link as shown for a:link and a:visited and one image for the rollover, ie for a:hover and a:active.
   
   Make sure to align all images perfectly within your required area. The example file is setup as 40px in width and 120px in height. The height of an additional 40px is added to create extra space which might be required when text is resized.
   Once you are finished – save your graphic optimised for your site.
   As the image will be applied as background image – you can choose to save as PNG if necessary. All modern browsers will be fine but you will need an additional style sheet for IE6 replacing your PNG with its GIF version. So you should always save one of each (1 PNG and 1 GIF) at this stage.
   
2. with your new sprite image saved into your site’s image folder – go back to your coding program and edit your site.
   My example here uses a simple fixed width layout with a left side menu – view sample.
   The rollover links here are displayed within an unordered list. To achieve the desired rollover effect – you need to make use of the default behaviour of the link element. By targeting the link itself – you can control more than the mere static appearance of the links. Using CSS and the ‘background-position’ rule – you can control which part of your graphic is visible.
   
   When using the ‘background-position’ you can specify 2 values – the first being the horizontal shift, the second the vertical positioning – you can use both positive and negative values.

The actual values you will need to use for this technique to work will of course depend on your design and overall layout. To practice this for now – please feel free to download the file used in my sample.
have fun experimenting ;)