[solved] CSS mystery. Help needed !

Hi,

Although HTML and CSS are not new to me, I cannot find where is defined the red triangle that we see here right to the menu entries (:hover) : http://www.cssplay.co.uk/menus/menufourteen.html

At the beginning, I thought it was a picture set as background-image.
But I saved the page as html-only and the triangle is still displaying, even when offline.

The CSS is defined in the page between the <style>...</style> markups but I cannot find anything about the red triangle.

Thanks.

It’s the span class that creates the red arrow head, not seen it done before.
If you don’t want it just comment out this line in the CSS.
And remove the <span> tags from within <a> tags.

You just beat me bunk! While clicking post it said someone else posted lol. Yeah the span tag is what’s holding the triangle.

Thanks a lot for the 2 quick answers.

Much interesting. It was quite difficult for me to catch how the triangle shape was defined.

From what I understood, the trick is to use large-enough borders with different colors (red and white) and the bevelled corners builds the triangle oblique sides. Exact ?

This is clever CSS usage!
Stu Nicholls is really a CSS brain.

In my code, the triangles do not display, although the spans are present. I want them !
Probably some conflict with 2 CSS...

Seems like a lot of work for a simple triangle... A gif of the same size would be 1kb or less and I’d say that would be far easier to manage and edit. I have a similar idea on one of my sites that uses a small arrow in the drop down though they are visible by default. You could easily applu an on hover, show arrow css trick.

Hope I am understanding you correctly here

www.rd-internet.com

I agree that this is lot of work and I wouldn’t have done it myself.
I also use a drop menu with a small picture, like your site does.

However, I must aknowledge that Stu Nicholl’s solution is an interesting trick and offers the advantage that you won’t forget to copy a small picture when moving the site.

Yeah, been there! The one that gets me every time is when I update modx... I keep forgetting the assets/images/logo image and it gets overwritten with the modx logo so it’s easy done to miss a single file.