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.
Anyways....
If you give ul.dropdown a z-index value of 2 or higher, the shading of the right fold should disappear.
Didn't mean to say the code was bad as such, just that I would have coded it less complex....but since it comes from a generator, it kind of makes sense why it's like this. :)
Anyway, looks like you added the z-index:3 to the ul.dropdown li, and not the ul.dropdown.
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.
Yes, agreed, CSS does allow for easier editing than images. However, how often does that really happen? In this very case, that's not the issue either, and if I had to create a menu like this, I would have used images. Not saying everybody always should. ;)
I am wondering if this could be an issue with the box-shadow or the z-index stacking order. I have made a jfiddle and you can also see the problem.
Here is the jfiddle code.
I have tried changing the z-index on the right side but it ends up covering up the box shadow.
Any ideas?
Anyways....
If you give
ul.dropdownaz-indexvalue of 2 or higher, the shading of the right fold should disappear.http://www.css3d.net/ribbon-generator/#preview
I tried changing the value you suggested and nothing happened. Did you use the the jfiddle?
Anyway, looks like you added the
z-index:3to theul.dropdown li, and not theul.dropdown.See http://jsfiddle.net/K5fVm/1/ for update.
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-wrapperand.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.@TheDoc - I was thinking the same thing but was undecided. If I dropped the box-shadow would that allow for more even cross-browser compatibility?
On another note, the markup you have got from that generator is absolute rubbish. Have a look at this technique (but use the triangle border technique): http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/
P.S. I agree with @TheDoc, it looks better without the shadow.
Fully agree, pure CSS allows for easier changing.
add this (z-index:0;) to 'ribbon-wrapper2' class
or http://jsfiddle.net/K5fVm/2/