How to create a menu with gradient

[kzoltan]

I want to create a menu using this picture: http://img10.imageshack.us/img10/3116/menueaw.jpg

I don't really know how to slice the picture. The menu in the picture have a gradient, and this is the real problem for me.

I have this HTML code for the menu:

<div id="menu">
  <h2>Header</h2>
  <div class="content">
    <ul>
      <li>Menu item 1</li>
      <li>Menu item 2</li>
      <li>Menu item 3</li>
      <li>Menu item 4</li>
    </ul>
  </div>
</div>

And this is the CSS:

/* =Menu
--------------------------------------------------------------------- */
#menu h2 {
    background: url("top.jpg") no-repeat;
    height: 74px;
 }
 
#menu .content {
    background: url("center.jpg") repeat-y;
 }

I don't know how to apply the gradient to bottom. Someone help me with an example or know an example website for me with a similar menu ?

Thanks!

[Centauri]

What are the top.jpg and center.jpg graphics you have so far?

[RyanReese]

You can have an element at the very bottom of the #menu div which is cleraed. Make it 100% width and apply the background image to that (make sure it has the dimensions to show the entire image).