In the last tutorial, we created an horizontal CSS menu that looked like this ...

When user hovers over the menu, it changes color from blue to orange and an underline appears.

In this tutorial, we will add some graphics so that upon hover, we get a graphical element that appears underneath the menu instead of an underline. The end result would be the following ...

See CSS menu with graphical effect in action »

1. Start with the CSS Horizontal menu code we did in previous tutorial ...

2. Let's add the red debugging border to the li element and add a blue debugging border to the "a" link element ...

3. You see how the boundary of the "a" element is smaller than the boundary of the "li" element...

This is caused why the hover effect only works when the cursor is right on top of the menu text. We want to extend the hover range so that hover effect is triggered whenever the mouse is within the red-boundaries. We do this by making the blue boundary same as the red boundary. Do this by putting the 5px top/bottom padding to the "a" element instead of the "li" element. Then making the "a" element a block-element instead of its default inline behavior...

Now we see that the boundaries of the "a" and the "li" elements are the same....

4. Using a graphical editor like Photoshop or Fireworks, we created this graphical image ...

making sure that its dimensions of 100px by 28px are within the boundaries of the "a" element.

This graphic is to be used as a background image to the "a" element upon hover. We name this background image menu-hover-background.jpg and placed it in the same directory as the CSS. Now we can add this CSS rule ...

After removing the debugging borders and the "text-decoration:underline", we get the following final results...