Arrow in navigation menus in CSS / JS (e.g. playframework.org)

Question

In the navigation menu at the top of http://www.playframework.org there is a small arrow pointing up for the currently selected section (Home, Learn, Download, ...). I tried to get away from the implementation that they used, but I can’t wrap it around myself - the resource does not appear in the Chrome Resources window, and the element check did not show any signs of the background image, nor the JS interceptor (although I might have missed this). What is going on in it? :)

Answer 1

This is HTML:

<ul id="menu"> <li class="selected"> <a href="/">Home</a><span>&gt;</span> </li> ... 

And the magic happens in this CSS fragment:

 #menu .selected a:after { content: " ."; display: block; text-indent: -99em; border-bottom: 0.8em solid #8adc92; border-left: 0.8em solid transparent; border-right: 0.8em solid transparent; border-top: none; height: 0px; margin-left: -.8em; margin-right: auto; margin-top: 14px; position: absolute; left: 50%; width: 1px; } 

This technique is called CSS arrows. You can find many articles and examples on the web.

( EDIT: @jeroen posted very good).

Answer 2

It looks like they used the css arrow, see more info here .

Answer 3

Here is a link to see her in action.

http://jsfiddle.net/zC5cp/

 .box{ background: red; color: #FFF; width: 100px; height: 100px; position:relative; } .arrow-up { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid white; position: absolute; bottom: 0px; margin-left: -10px; left:50%; }