How to add vertical gradient using css?

Question

I have vertical submenu as under:

<div id="dropdown_menu" class="menu">
<ul>
<li> <a>First Link</a></li>
<li> <a>Second Link</a></li>
</ul>
</div>

I am putting bottom piece of background in css class 'menu'., top slice of background in .menu ul. Now, I have one vertical gradient that changes color from top to down (in whole vertical menu) and therefore I cannot put it in .menu ul li. Is it possible to add the vertical gradient without making any change to html?

Answer 1

#dropdown_menu {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF280C00', endColorstr='#004A1D00'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#280C00), to(rgba(75, 30, 0, 0))); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #280C00,  rgba(75, 30, 0, 0)); /* for firefox 3.6+ */
}

See actual implementation here: http://www.salonbelledesoir.com (The gradients around the edge are CSS gradients.)

This will not work in Opera (though there may be a -o-gradient property that I just don't know about.

Or, you can use regular background images, repeated accordingly.

Answer 2

I personally consider the x-repeated background image to be the best solution at present. Filters give you no cross-browser compatibility warranty, so you had better stick with the old ways for now.. The way to achieve the result this way is:

.gradient {
  background: #xxx url(pathtoimagedirfromcssfile/background.jpg) center top repeat-x;
}

where #xxx is the background color code, center & top are the starting position of the image to be repeated