Very confused by your code and all its positive/relative positioning and the actual ribbon doesn’t line up perfectly with the shades/folds/ribbons in some browsers. All those nested divs look very unnecessary at first glance but maybe you have a good reason for it.
If you give ul.dropdown a z-index value of 2 or higher, the shading of the right fold should disappear.
Sure, with pure CSS you might save bandwidth if you use it to replace graphics that are significantly larger than the CSS code, but in this case, images for this menu wouldn’t be large at all.
To use pure CSS just for the sake of using CSS instead of graphics, I never got that to be honest. Just because you can, doesn’t always mean you should. I believe it’s personal choice, and depending on the situation, not necessarily a defined “way to go”. It can cause a lot of other issues….like not displaying correctly in Firefox. ;)
It can be fixed easily in Firefox (change the top value of .ribbon-wrapper and .ribbon-wrapper2) but I’m sure it will break in other browsers then. This is what I meant with the complexity of all the absolute/relative positioning, I wouldn’t say it’s such a good idea.
I disagree with @Senff regarding the use of images for this. What if you wanted to change the color/height/shadow? With CSS that is very easy to do; just change a few values. So in other words, there is a tangible benefit from using CSS instead of images. That isn’t always the case (experimental CSS3 features), but it certainly is in this instance.